[Bootstrap]要素の順番を入れ替えて表示がしたい（push,pull）
ダディーです。
最近特定の画面サイズの時だけ、コンテンツの順序を入れ替えて表示したいな…と思うようになりました。
例えば写真と短い文章でブログを作る時、スマートフォンだと写真→文章の順番で置いたほうが
インパクトが有って良いこともあります。
でもPCでは逆に文章→写真の順で横並びで置きたい…。
それを今までの記述で書くとこうなってしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <!-- タブレット/スマートフォンの画面構成を優先したため、 --> <div class="col-md-4 col-sm-12 col-xs-12"> 写真 </div> <!-- PCのときに文章が右に来てしまう --> <div class="col-md-8 col-sm-12 col-xs-12"> 文章 </div> </div> </div> |
これをそのまま実行すると以下のようになります。（左側に写真があっても結構しっくり来てしまいましたが…）
広大な土地から見える風景
荒野に広がる赤い土が魅せる広大さと、青い空が魅せる雄大さのバランスがここから見える風景をより一層美しくきれいに見せています。
とても同じ地球の風景とは思えないこの場所に、我々はただ息を呑むばかりです。
しかし、class=”col-xs(sm/md/lg)-pull-(左側のグリッド数)”、class=”col-xs(sm/md/lg)-push-(右側のグリッド数)”で
特定の画面サイズを指定してのグリッド並べ替えが可能になります。
感覚的には以下の通りになります。まさに「入れ替える」形ですね。
- 右に移動させたいカラムを「右にあるカラムに割り当てられているグリッド数分押し込む （Pushする）」
- 左に移動させたいカラムを「左にあるカラムに割り当てられているグリッド数分引き上げる（Pullする）」
記述法はこうなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <!-- mdの時に、右にあるカラムに割り当てられている8グリッド分押し込む --> <div class="col-md-4 col-sm-12 col-xs-12 col-md-push-8"> 写真 </div> <!-- mdの時に、左にあるカラムに割り当てられている4グリッド分引き上げる --> <div class="col-md-8 col-sm-12 col-xs-12 col-md-pull-4"> 文章 </div> </div> </div> |
これを先程のパーツ達にさせると、md以上の画面サイズではpush/pullが適用されて並べ替えられています。
sm以下の画面サイズにすると解除されて写真が先にくるようになっていますね。
広大な土地から見える風景
荒野に広がる赤い土が魅せる広大さと、青い空が魅せる雄大さのバランスがここから見える風景をより一層美しくきれいに見せています。
とても同じ地球の風景とは思えないこの場所に、我々はただ息を呑むばかりです。
一見地味ですが、意外と頼ることが多くなりそうな技法ではないかな？と個人的には思っております。