clearfix ≪ グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

clearfix使用比較。

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

clearfixを指定した場合

ブラウザのサイズを992px未満の幅にすると、３つ目以降のカラム群から新たな行に折り返す。

サンプル

.col-xs-6 .col-md-3

比較しやすいように、カラムに枠線を付けてある。

ソースコード

<style>
.sampleRow > div {
	border: 1px solid gray;  
}
</style>
<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-6 col-md-3" style="height:7em;">.col-xs-6 .col-md-3</div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
		<div class="clearfix visible-xs visible-sm"></div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
	</div>
</div>

clearfixを指定しない場合

ブラウザのサイズを992px未満の幅にすると、２つ目以降のカラム群が縦に並ぶ。

サンプル

.col-xs-6 .col-md-3

比較しやすいように、カラムに枠線を付けてある。

ソースコード

<style>
.sampleRow > div {
	border: 1px solid gray;  
}
</style>
<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-6 col-md-3" style="height:7em;">.col-xs-6 .col-md-3</div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
		<div class="col-xs-6 col-md-3" style="height:2em;">.col-xs-6 .col-md-3</div>
	</div>
</div>