【Bootstrap】レスポンシブデザインで要素の順番を変える方法

Bootstrapにおけるレスポンシブデザインで、要素の順番を変える方法はどうやるの？

という疑問にお答えします。

例えばLargeサイズからMediumサイズへ移行するとき、もちろん他のサイズの移行でも構いませんが、要素の順番を変えたいときってありますよね。

そんなときは、「oder- ブレイクポイント-数字」のクラスを追加するだけで解決です。

さっそく見ていきましょう。

やりたいこと

Largeサイズでの要素の表示はこの通り横並び。
ーーーーーーー
要素A 　　要素B
ーーーーーーー

Mediumサイズに移行したときは

ーーーー
要素B
要素A
ーーーー

このような順番にしたいときです。

サンプルコード

それではクラスを追加してみましょう。

クラス名は「oder- ブレイクポイント-数字」です。

ブレイクポイントは下記のとおりです。

small = sm

Medium = md

Large = lg

Extra large = xl

数字は表示したい順番を表します。

Largeサイズでの表示。

ーーーーーーー
要素A 　　要素B
ーーーーーーー

これをMedium（md）サイズでは順番を逆にします。

要素A には「oder- md-2」、

要素Bには「oder- md-1」のクラスを追加してあげましょう。

ーーーー
要素B
要素A
ーーーー

このように順番が入れ替わります。

まとめ

いかがでしたでしょうか。
簡単ですよね。

「order-ブレイクポイント-数字」のクラスを追加すると、

どのサイズのときに、どの順番に表示させるか、を指定できます。

とっても簡単ですので、アレンジしてみてください。

Bootstrapのコーディングはグリッドジェネレーターがおすすめです。