BootstrapのGrid systemで横幅によって表示順序を変更

Created 2018年5月25日13:27
Updated 2018年5月25日14:50
Categories HTML

概要

このサイトを作るとき、Grid Systemの表示順序に少してこずったのでメモ。

当ブログのサイドバーはPCで表示すると左に表示されますが、スマートフォンで見ると記事の下に表示されます。

この動作はBootstrapのGrid systemというレスポンシブ対応の仕組みで実現されていますが、何も考えずに実装するとサイドバーが記事の上に出てしまいます。

これを下にする方法を書いておきます。

TL;DR

<div class="row">
    <div class="col-12 col-sm-3 order-last order-sm-first">
        <!-- サイドバー -->
    </div>
    <div class="col-12 col-sm-9 order-first order-sm-last">
        <!-- コンテンツ -->
    </div>
</div>

PCから見るときはcol-smやorder-smの値が適用され、スマホから見るときはcol-やorder-の値が適用されます。

orderクラスはfirstやlastだけでなく、細かく値が設定できるようです。

特にスクリプトなど必要なく適用できるのは非常に便利ですね。

参考

コメントを投稿

コメント