Bootstrap İle Kolonları Yeniden Sıralama

20-03-2014, 17:38:24

#1

ozgrozer

Aşağıdaki resimdeki gibi tarayıcı boyutu küçüldüğünde yani mobil olduğunda divlerimi yeniden nasıl sıralayabilirim?

20-03-2014, 17:48:22

#2

~~boykAa~~

Üyeliği durduruldu

Hocam resim değilde kod mantığınızı iletirseniz sorununuza yardımcı olabilirim ama mantıken her dive float:left verdiğiniz de sorununuz çözülmüş olması lazım.

21-03-2014, 20:50:26

#3

ozgrozer

Kodlarım böyle.

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">A</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">B</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">C</div>

Tarayıcı boyutu küçüldüğünde div'ler yanyana sıralanıyor ama A,B,C şeklinde sıralanıyor.
Benim istediğim şey ise sıralamanın C,A,B olması.

Anlatabilmişimdir umarım...

22-03-2014, 15:42:07

#4

EkolWeb

css3 transform özelliği ile sıralamayı değiştirebilirsiniz. Bunuda @media içerisinde kullanırsanız istediğiniz boyuta girdiğinde böylece sıralama değişir.

-webkit-transform: scaleY(-1);
transform: scaleY(-1);

22-03-2014, 17:41:38

#5

ozgrozer

EkolWeb adlı üyeden alıntı: mesajı görüntüle

css3 transform özelliği ile sıralamayı değiştirebilirsiniz. Bunuda @media içerisinde kullanırsanız istediğiniz boyuta girdiğinde böylece sıralama değişir.

-webkit-transform: scaleY(-1);
transform: scaleY(-1);

Pardon ama scale,scaleX,scaleY bunlar obje ölçeklendirmeye yarar. Benim bahsettiğim konuyla ne gibi bi bağı var anlamadım?

22-03-2014, 18:18:09

#6

EkolWeb

ozgrozer adlı üyeden alıntı: mesajı görüntüle

Pardon ama scale,scaleX,scaleY bunlar obje ölçeklendirmeye yarar. Benim bahsettiğim konuyla ne gibi bi bağı var anlamadım?

Pardon dalgınlıkla yanlış bilgi verdim kusura bakmayın aslında sorunu çözmek için ana seçiçi içerisinde aynı classa sahip elementleri reverse() ile ters sıralatabilirsiniz. Ancak bunun için javascript ile aynı @media için kullandığınız width değerlerini kontrol ettirerek çalıştırırsanız istediğiniz olur.

 $(".wrapper").append($(".item").get().reverse());

22-03-2014, 22:30:31

#7

ozgrozer

EkolWeb adlı üyeden alıntı: mesajı görüntüle

Pardon dalgınlıkla yanlış bilgi verdim kusura bakmayın aslında sorunu çözmek için ana seçiçi içerisinde aynı classa sahip elementleri reverse() ile ters sıralatabilirsiniz. Ancak bunun için javascript ile aynı @media için kullandığınız width değerlerini kontrol ettirerek çalıştırırsanız istediğiniz olur.

 $(".wrapper").append($(".item").get().reverse());

İlgilendiğiniz için teşekkürler, jQuery ile yapabilirdim zaten bunu ama başlıktada belirttiğim gibi bootstrap'in böyle bi özelliği var mı yok mu varsa nasıl yapabilirim onu öğrenmek istiyodum. Aradığım şeyi buldum. Şöyle bişey..

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-push-4 col-lg-push-4">B</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-pull-4 col-lg-pull-4">A</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">C</div>

push ve pull kullanarak divleri farklı ekran çözünürlüklerinde istediğimiz gibi yeniden sıralayabiliyoruz.

01-03-2016, 16:26:19

#8

Buhara25

Kimlik doğrulama veya yönetimden onay bekliyor.

Hocam düzgün bir şekilde kimse anlatmamış

01-03-2016, 16:33:48

#9

~Aykut

http://getbootstrap.com/css/#grid-column-ordering burada ornek var