表示順位の変更
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：-1 と order：6 を適用して要素の表示順を変更します。
あわせて読みたい
Bootstrap4カラムを入れ替える（表示順の変更）
表示順位の変更 order-* bootstrap4では.col-**-push-* .col-**-pull-* クラスはなくなり、.order-*クラスに統一されました。 1番目 2番目 3番目 <div class="d...