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