今回は、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
ーーーー
このように順番が入れ替わります。
詳しはこちら。 https://skillhub.jp/courses/168/lessons/915
まとめ
いかがでしたでしょうか。
簡単ですよね。
「order-ブレイクポイント-数字」のクラスを追加すると、
どのサイズのときに、どの順番に表示させるか、を指定できます。
とっても簡単ですので、アレンジしてみてください。
Bootstrap関連の記事も紹介しておきます↓ 続きを見る
【Bootstrap】めちゃめちゃ便利 Grid Builderでカラム設定が爆速!