表示順を変更 ≪ グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

col-md-push-*とcol-md-pull-*は、カラム群の表示順を変更することができる。

col-md-push-*は、本来の位置より、*に指定したカラム数分、右に配置する。

col-md-pull-*は、本来の位置より、*に指定したカラム数分、左に配置する。

サンプル１

ブラウザのサイズを変更して、992px以上と未満の幅で比較してみて。

992px以上の幅の場合、左に弟要素、右に兄要素を配置する。

992px未満の幅の場合、左に兄要素、右に弟要素を配置する。

サンプル

兄要素

弟要素

比較しやすいように、カラムには高さ、枠線、背景色を指定してある。

ソースコード

<style>
.sampleRow > div {
	min-height: 6em;
	border: 1px solid gray;  
	background: #cef3f5;
}
</style>
<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-9 col-md-push-3">兄要素</div>
		<div class="col-xs-3 col-md-pull-9">弟要素</div>
	</div>
</div>

サンプル２

ブラウザのサイズを変更して、992px以上と未満の幅で比較してみて。

992px以上の幅の場合、横並びで、左に弟要素、右に兄要素を配置する。

992px未満の幅の場合、縦並びで、上に兄要素、下に弟要素を配置する。

サンプル

兄要素

弟要素

比較しやすいように、カラムには高さ、枠線、背景色を指定してある。

ソースコード

<style>
.sampleRow > div {
	min-height: 6em;
	border: 1px solid gray;  
	background: #cef3f5;
}
</style>
<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-md-9 col-md-push-3">兄要素</div>
		<div class="col-md-3 col-md-pull-9">弟要素</div>
	</div>
</div>

サンプル３

ブラウザのサイズを変更して、992px以上と未満の幅で比較してみて。

992px以上の幅の場合、ＢＡＣの順で、横並びに配置する。

992px未満の幅の場合、ＡＢＣの順で、縦並びに配置する。

サンプル

Ａ

Ｂ

Ｃ

比較しやすいように、カラムには高さ、枠線、背景色を指定してある。

ソースコード

<style>
.sampleRow > div {
	min-height: 6em;
	border: 1px solid gray;  
	background: #cef3f5;
}
</style>
<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-md-4 col-md-push-4">Ａ</div>
		<div class="col-md-4 col-md-pull-4">Ｂ</div>
		<div class="col-md-4">Ｃ</div>
	</div>
</div>