【今日のQ&A】並べ替えのいろは【Bootstrap】

前回に引き続き、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」の順番で表示させたい場合。

1.HTMLで記述する順番を変える。
<div class=“d-flex flex-nowrap”>
<div>Third flex item</div>
<div>Second flex item</div>
<div>First flex item</div>
</div>

2.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-*クラスに統一されました。