Bootstrap4カラムを入れ替える(表示順の変更)

表示順位の変更

order-*

bootstrap4では.col-**-push-* .col-**-pull-* クラスはなくなり、.order-*クラスに統一されました。

1番目
2番目
3番目
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">1番目</div>
  <div class="order-2 p-2">2番目</div>
  <div class="order-1 p-2">3番目</div>
</div>

html上では1番目、2番目、3番目で書いていますが、実際は3番目から表示されています。

サイズ別

576px以上768px以上992px以上1200px以上
.order-0.order-sm-0.order-md-0.order-lg-0.order-xl-0
.order-1.order-sm-1.order-md-1.order-lg-1.order-xl-1
.order-2.order-sm-2.order-md-2.order-lg-2.order-xl-2
.order-3.order-sm-3.order-md-3.order-lg-3.order-xl-3
.order-4.order-sm-4.order-md-4.order-lg-4.order-xl-4
.order-5.order-sm-5.order-md-5.order-lg-5.order-xl-5
.order-6.order-sm-6.order-md-6.order-lg-6.order-xl-6
.order-7.order-sm-7.order-md-7.order-lg-7.order-xl-7
.order-8.order-sm-8.order-md-8.order-lg-8.order-xl-8
.order-9.order-sm-9.order-md-9.order-lg-9.order-xl-9
.order-10.order-sm-10.order-md-10.order-lg-10.order-xl-10
.order-11.order-sm-11.order-md-11.order-lg-11.order-xl-11
.order-12.order-sm-12.order-md-12.order-lg-12.order-xl-12
あわせて読みたい
Bootstrap5カラムを入れ替える(表示順の変更) 【表示順位の変更】 order-* bootstrap5では .order-1 から .order-5 までのクラスになり、.order-6 から .order-12 はなくなりました。 1番目 2番目 3番目 <div cla...
  • URLをコピーしました!