Bootstrapのグリッドで入れ子を上下入れ替える裏技！！

Bootstrapの入れ子をレスポンシブの際に上下を逆にしたい

Bootstrapのグリッドは通常左にあるものがレスポンシブすると上、右にあるものがレスポンシブすると下にきます。

でも実際、サイドバーが右にしたい時

HTML

<div class="container">
	<div class="row">
		<div class="col-md-3">
			ここにサイドバー内容
		</div>
		<div class="col-md-9">
			ここにコンテンツ内容
		</div>
	</div>
</div>

このコードだと、サイドバーがレスポンシブした時に上にきてしまいます。

そんなときにBootstrap。便利なクラスが存在します！

このような場合は下記の様に記載します。

HTML

<div class="container">
	<div class="row">
		<div class="col-md-9 col-md-push-3">
			ここにコンテンツ内容
		</div>
		<div class="col-md-3 col-md-pull-9">
			ここにサイドバー内容
		</div>
	</div>
</div>

この様に記載すると、レスポンシブ時にはサイドバーが下にコンテンツが上にきます。