【Bootstrap】要素の順番を変えるクラス名　order-ブレイクポイント-数字　レスポンシブ

今回は、Bootstrapにおけるレスポンシブデザインで、要素の順番を変える方法をご紹介します。

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

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

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

やりたいこと

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

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

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

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

Bootstrap4フロントエンド開発の教科書 ウェブ開発の知識とコツをしっかりマスター [ 宮本麻矢 ] 価格：3608円（税込、送料無料) (2021/11/12時点)

サンプルコード

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

クラス名は「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関連の記事も紹介しておきます↓