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

表示順位の変更

order-*

bootstrap5では .order-1 から .order-5 までのクラスになり、.order-6 から .order-12 はなくなりました。

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以上1400px以上
.order-first .order-sm-first .order-md-first .order-lg-first .order-xl-first .order-xxl-first
.order-0 .order-sm-0 .order-md-0 .order-lg-0 .order-xl-0 .order-xxl-0
.order-1 .order-sm-1 .order-md-1 .order-lg-1 .order-xl-1 .order-xxl-1
.order-2 .order-sm-2 .order-md-2 .order-lg-2 .order-xl-2 .order-xxl-2
.order-3 .order-sm-3 .order-md-3 .order-lg-3 .order-xl-3 .order-xxl-3
.order-4 .order-sm-4 .order-md-4 .order-lg-4 .order-xl-4 .order-xxl-4
.order-5 .order-sm-5 .order-md-5 .order-lg-5 .order-xl-5 .order-xxl-5
.order-last .order-sm-last .order-md-last .order-lg-last .order-xl-last .order-xxl-last

.order-first.order-last クラスは order:-1order:6 を適用して要素の表示順を変更します。

あわせて読みたい
Bootstrap4カラムを入れ替える(表示順の変更) 【表示順位の変更】 order-* bootstrap4では.col-**-push-* .col-**-pull-* クラスはなくなり、.order-*クラスに統一されました。 1番目 2番目 3番目 <div class=&qu...
  • URLをコピーしました!