Bootstrap のグリッドシステムでレスポンシブデザインを行う際、画面サイズに応じて col の順番を入れ替えたいケースがあります。
そういった場合、従来は col-push, col-pull といったクラスを使用していましたが、Bootstrap4 ではクラス名が order へと変更されています。
今回はこの order の使用方法を説明したいと思います。
INDEX
目次
- Bootstrap4 Grid で横並びの col の順番を入れ替える
- まとめ
Bootstrap4 Grid で横並びの col の順番を入れ替える
以下のような 3つの div（col）があった場合、左から順番に 1-2-3 と表示されます。
[code]
1
2
3
[/code]
order-first
3番目 の div（col）に order-first クラスを加えた場合、3-1-2 と表示されます。
[code]
1
2
3
[/code]
order-last
1番目 の div（col）に order-last クラスを加えた場合、2-3-1 と表示されます。
[code]
1
2
3
[/code]
order-num
2番目 の div（col）に order-12, 3番目 の div（col）に order-1 クラスを加えた場合、1-3-2 と表示されます。
[code]
1
2
3
[/code]
bootstrap のスタイルを見ると、order-first には -1、order-last には 13 の order が定義されているため、order-1 や order-12 より優先されることが理解できます。
まとめ
bootstrap のバージョンアップによる修正コストは無視できるものではありませんが、今回説明した order への変更は pull、push より明示的な表現のため、コーディングしやすく、メンテナンスがやりやすくなったと感じました。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
