bootstrap栅格排版防止堆叠

bootstrap栅格排版防止堆叠

html代码如下：

<div class="row">
	<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3 ddddd ddddd 
	ddddd ddddd ddddd ddddd ddddd dddd dddddd dddddddd 
	dddddd dddddddd ddddd ddddd</div>
	<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3</div>
	<div class="clearfix visible-sm visible-md"></div>
	<div class="col-sm-6 col-lg-3">col-xs-6 col-sm-3 </div>
</div>

这里特地把第一个div的内容加多，否则看不出效果。因为bootstrap的布局方式实际上是float: left; 如果没有clearfix这一步，第三个div实际上出现在第二个下面。如下图所示：

而有clearfix那一步，出现的效果则如下图所示：

还有这里的class=“visible-md”必须要有，否则屏幕宽度大于992px时clearfix所在的div会隐藏，从而再次导致堆叠。
因为没写col-md-*，实际上col-sm-*起作用的范围是包括col-md-*的（只要大于768px），而visible-sm作用范围却不包括visible-md，在屏幕宽度大于992px时，所在div会被隐藏。