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會被隱藏。