Sıralama

Esnek kutu ızgara sistemimiz sayesinde bir dizi sıralama seçeneğiyle sütunları nasıl değiştireceğinizi öğrenin.

Öncesinde Izgara Sistemleri'ni okuduğunuzdan emin olun.

- Sıralama sınıfları#

Sütunları yeniden sıralamak için yardımcı classları kullanın. İçeriğinizin görsel sırasını kontrol etmek için .order- sınıflarını kullanın. Izgara katmanının tamamında 1'den 10'a kadar destek içerir.

.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}

...

.order-10 {
    order: 10;
}

Örnek kullanım#

<div class="row">
  <div class="col order-2">
    1
  </div>
  <div class="col order-3">
    2
  </div>
  <div class="col order-1">
    3
  </div>
</div>

Kırılma noktası ile kullanım#

Kırılma noktaları ile beraber kullanabilirsiniz. Örneğin, .order-1.order-md-2...

    
@media (min-width: 992px) {
  .order-lg-1 {
      order: 1;
  }
  .order-lg-2 {
      order: 2;
  }
  ...
}
    
@media (min-width: 768px) {
  .order-md-1 {
      order: 1;
  }
  .order-md-2 {
      order: 2;
  }
  ...
}

...

Değişimi görmek için ekranı küçültün. Genişlik < col-lg

<div class="row">
  <div class="col order-lg-1 order-2">
    1
  </div>
  <div class="col order-lg-2 order-3">
    2
  </div>
  <div class="col order-lg-3 order-1">
    3
  </div>
</div>