Web制作

【WordPress TIPS】Bootstrapで段組みを制御する

2023.01.12

Bootstrapで段組みを制御する

Bootstrapのグリッド機能のひとつ、ORDER指定を使って、複雑な段組みを簡単に組むことが出来ます。
例えば上のサンプルでは、スマートフォンサイズの場合は「画像(1)」「最初の文章」「画像(2)」「2番目の文章」「画像(3)」「3番目の文章」「画像(4)」「最後の文章」と並んでいますが、パソコンなどの幅広の画面ではスマホとは違った配置になっています。


BootstrapのcontainerDIVでレイアウト

Bootstrapで段組みを制御する

Bootstrapの「container-fluid」DIVの中に、「row」DIVブロックを配置。
さらにその中に、「col」DIVを入れ子にしていく基本的なグリッドシステムを使います。


スマホ用に並べた順番で記述

Bootstrapで段組みを制御する

「row」DIVスマホで上から表示したい順に、DIVブロックを並べていきます。
この時、並べたcolDIVブロックのクラスに、今回は「col-lg-6」でBootstrapのlgグリッド以上の時に親要素の横幅の半分になるように設定。
画像colDIVと文章colDIVを交互に記述していきます。


ORDERクラスを定義する

Bootstrapで段組みを制御する

「row」に並べたcolDIVブロックのクラスに、「order-xl-●」「order-lg-●」を追加します。

「order-xl-●」はBootstrapグリッドのXLサイズの時の並び順「order-lg-●」はLGサイズの時の並び順、を指定します。


例えばこんな感じになります

Bootstrapで段組みを制御する

LGサイズ以上の時の見た目がこんな感じになります。
画像・文章DIVブロックが全部で8つあり、それらがORDERで指定した順に「col-ld-6」定義によって2列に配置される・・・といった感じになります。


スマホの時は画像→文章の並び順になってほしいけど、パソコンの時は違うレイアウトにしたい場合など 使い道の多い機能だと思います。ぜひお試しを。

【この記事のライター】
SASSAN
株式会社エー・エム・ティー Web Director / Web Engineer