Bootstrapの並び順を自由に変更！orderクラスでスマホとPCの表示順を入れ替える完全ガイド

並び順の制御：.order-* でスマホとPCの順序を入れ替える

先生と生徒の会話形式で理解しよう

生徒

「スマホで見ると画像を先に、パソコンだと文章を先に表示したいんですが、どうすればいいですか？」

先生

「Bootstrapのグリッドシステムには、表示の順番を変えられる仕組みがあります。」

生徒

「HTMLを書き直さずに順番を変えられるんですか？」

先生

「orderクラスを使えば、スマホとPCで並び順を入れ替えることができます。」

1. Bootstrapの並び順制御とは何か

Bootstrapのグリッドシステムでは、画面の横幅に応じて要素の配置や並び方を変えることができます。その中でも並び順の制御は、表示される順番を画面サイズごとに変更できる便利な仕組みです。

例えば、スマホでは「画像→文章」、パソコンでは「文章→画像」のように、見る人にとって分かりやすい順番に調整できます。これはデザインだけでなく、読みやすさにも大きく関係します。

2. orderクラスの基本的な考え方

orderクラスは、要素に番号を付けて並び順を決める方法です。番号が小さいほど、前に表示されます。

数字は「順番札」のようなものだと考えると分かりやすいです。1番の札を持った人が一番前、2番がその次、というイメージです。

3. スマホとPCで順番を変える仕組み

Bootstrapには画面サイズごとの指定があり、スマホ向け、タブレット向け、パソコン向けにクラスを分けられます。

orderクラスも同じで、スマホ用、PC用と分けて指定できます。これにより、同じHTMLでも表示順を切り替えられます。

4. シンプルな並び順変更の例


<div class="row">
    <div class="col-6 order-2">
        文章エリア
    </div>
    <div class="col-6 order-1">
        画像エリア
    </div>
</div>

ブラウザ表示

この例では、HTML上では文章が先に書かれていますが、表示では画像が先になります。orderの数字で並び順が決まるためです。

5. スマホとPCで順番を入れ替える例


<div class="row">
    <div class="col-md-6 order-2 order-md-1">
        パソコンでは先に表示
    </div>
    <div class="col-md-6 order-1 order-md-2">
        スマホでは先に表示
    </div>
</div>

ブラウザ表示

スマホではorderの指定が使われ、パソコンサイズではorder-mdが有効になります。これにより、画面サイズごとに順番を変えられます。

6. 画像と文章を使った実践的な例


<div class="row align-items-center">
    <div class="col-md-6 order-2 order-md-1">
        <h3>商品の説明</h3>
        <p>この商品は初心者でも使いやすい設計です。</p>
    </div>
    <div class="col-md-6 order-1 order-md-2">
        <img src="/img/sample150-100.jpg" class="img-fluid" alt="サンプル画像">
    </div>
</div>

ブラウザ表示

スマホでは画像を先に見せ、パソコンでは説明文を先に読ませる構成です。ネットショップなどでよく使われる考え方です。