プログラミング

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

スポンサーリンク

整列

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

Bootstrapなのでクラスを追加するだけです。
とても簡単ですのでご参考ください。



体験

あるサイトを模写していました。

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

しかし、スマホサイズにしてレイアウトを確認すると、

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

こんな感じでした。

これはどうやるんだ?
となりました。

 

サンプルコード

ズバリ、解決方法は、これ。

「order-〇〇(サイズ)-▲(数字)」

要素にこのクラス(class)を加えるだけです。

例えば、下記の場合。

<div class="col-md-6 order-sm-2">要素A</div>
<div class="col-md-6 order-sm-1">要素B</div>

mdサイズのときは、

要素A 要素B

というように、6カラムずつ、横並びになります。

そして、smサイズにときは、普通なら

要素A
要素B
となりますが、

「order-sm-数字」 のクラスで順番を指定しているので、

要素B
要素A

という縦一列になります。

詳しはこちら。
https://skillhub.jp/courses/168/lessons/915

まとめ

「order-〇〇(サイズ)-▲(数字)」を使うと、

どのサイズのときに、どの順番に表示させるか、

を指定できます。

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

Bootstrap関連の記事も紹介しておきます↓

スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5