Bootstrap3 のグリッドシステムでは pull / push という要素を押し込む/引っ張るためのクラスが使える。これを使うことでレスポンシブに要素の順番を入れ替えることができる。
押し込む/引っ張ると言ってもわかりづらいので実例を見たい。
要素を入れ替える例
PC view
「戻る」が左、「すすむ」が右。一般的な構成。
Mobile view
モバイルで閲覧しているときには「すすむ」が上、「戻る」が下。これも一般的な構成。しかし要素の順番が PC と入れ替わっている。
コード
See the Pen push/pull with Bootstrap by Masato Ohba (@ohbarye) on CodePen.
PC view では右側にある「すすむ」が HTML では先に記述するのがポイント。この「すすむ」を col 6つぶん押し込む (push)。逆に後に記述する「戻る」を col 6つぶん引っ張る (pull)。
この組み合わせで順序が入れ替わる。また、おなじみの col-**- prefix でレスポンシブなマークアップができる。
