BootstrapのGrid systemの使い方

BootstrapのGrid systemについて、大まかな使い方はBootstrapを使ってみるの記事内で書いたので、今回は前に触れなかった部分を見てみたいと思います。

Nesting columns

列の水平方向のグループを作成する.rowは、入れ子にすることができます。
例えば、下記のように幅の広い時は4列、狭めた時は下に落として2列ずつにしたいとき、

下記のデモ1のように一番左の要素の高さが高い時、3列目以降が1列目の要素の右にきてしまいます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3<br />テキスト<br />テキスト<br />テキスト</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
	</div>
</div>

Nesting columnsのデモページ1
　

最初の2列と後の2列を別々の入れ子にすることで、想定した通りのレイアウトにできます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="row">
				<div class="col-xs-6 col-md-6">.col-xs-5<br />.col-md-3<br />テキスト<br />テキスト<br />テキスト</div>
				<div class="col-xs-6 col-md-6">.col-xs-7<br />.col-md-4</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="row">
				<div class="col-xs-6 col-md-6">.col-xs-6<br />.col-md-3</div>
				<div class="col-xs-6 col-md-6">.col-xs-6<br />.col-md-2</div>
			</div>
		</div>
	</div>
</div>

Nesting columnsのデモページ2
　

Column ordering

列の並び順を変更することができます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-5 col-md-5 col-md-push-4" style="background: #E74C3C;">.col-xs-5<br />.col-md-5</div>
		<div class="col-xs-4 col-md-4 col-md-pull-5" style="background: #3498DB;">.col-xs-4<br />.col-md-4</div>
		<div class="col-xs-3 col-md-3" style="background: #2ECC71;">.col-xs-3<br />.col-md-3</div>
	</div>
</div>

Column orderingのデモページ

デモページの場合、画面サイズがmd(992px以上)の時、1番目の赤い要素を右へ4列分移動、
2番目の青い要素を左へ5列分移動しています。