表示順位の変更
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...
