前回に引き続き、Bootstrapについての内容になります。
皆さんもぜひ復讐もしくは参考にしてみてください！
Bootstrapで、表示する順番を入れ替える方法は？
元のHTMLコード
<div class=”d-flex flex-nowrap”>
<div>First flex item</div>
<div>Second flex item</div>
<div>Third flex item</div>
</div>
この状態だと「First flex item」「Second flex item」「Third flex item」の順番で表示される。
これを「Third flex item」「Second flex item」「First flex item」の順番で表示させたい場合。
１．HTMLで記述する順番を変える。
<div class=“d-flex flex-nowrap”>
<div>Third flex item</div>
<div>Second flex item</div>
<div>First flex item</div>
</div>
２．Bootstrapの「.order-*」クラスを用いる
<div class=“d-flex flex-nowrap”>
<div>First flex item</div>
<div>Second flex item</div>
<div>Third flex item</div>
</div>
※ Bootstrap4では.col-**-push-* .col-**-pull-* クラスはなくなり、.order-*クラスに統一されました。
