Update!

CSS3: Bootstrap4 グリッドシステムで横並びの col の順番を入れ替える



Bootstrap のグリッドシステムでレスポンシブデザインを行う際、画面サイズに応じて col の順番を入れ替えたいケースがあります。
そういった場合、従来は col-push, col-pull といったクラスを使用していましたが、Bootstrap4 ではクラス名が order へと変更されています。

今回はこの order の使用方法を説明したいと思います。

目次

  • Bootstrap4 Grid で横並びの col の順番を入れ替える
  • まとめ

Bootstrap4 Grid で横並びの col の順番を入れ替える

以下のような 3つの div(col)があった場合、左から順番に 1-2-3 と表示されます。

<div class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4">2</div>
        <div class="col-4">3</div>
    </div>
</div>

order-first

3番目 の div(col)に order-first クラスを加えた場合、3-1-2 と表示されます。

<div class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4">2</div>
        <div class="col-4 order-first">3</div>
    </div>
</div>

order-last

1番目 の div(col)に order-last クラスを加えた場合、2-3-1 と表示されます。

<div class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4">2</div>
        <div class="col-4 order-firast">3</div>
    </div>
</div>

order-num

2番目 の div(col)に order-12, 3番目 の div(col)に order-1 クラスを加えた場合、1-3-2 と表示されます。

<div class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4 order-12">2</div>
        <div class="col-4 order-1">3</div>
    </div>
</div>

bootstrap のスタイルを見ると、order-first には -1、order-last には 13 の order が定義されているため、order-1 や order-12 より優先されることが理解できます。

まとめ

bootstrap のバージョンアップによる修正コストは無視できるものではありませんが、今回説明した order への変更は pull、push より明示的な表現のため、コーディングしやすく、メンテナンスがやりやすくなったと感じました。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents