引導3 - 固定寬度+液柱，重新排序列，列排水溝

Question

我看了一些帖子在這裏關於如下：

1. 天溝列之間
2. 上「最左邊的」無排水溝和「最右邊的」列
3. 根據屏幕2分固定大小列
4. 重新排序列大小

我有一個需要配合的佈局全部組合。附加的是layout模擬。這裏是我迄今所做jsfiddle

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 a">News</div> 
    <div class="col-lg-3 col-md-3 col-sm-12 b">Videos</div> 
    <div class="col-lg-3 col-md-3 col-sm-6 c">MRec1</div> 
    <div class="col-lg-3 col-md-3 col-sm-6 d">MRec2</div> 
    <div class="col-lg-3 col-md-3 col-sm-6 e">Button1</div> 
    </div> 
</div> 

jQuery(document).ready(function() { 

    $(window).resize(function() { 
    iTargetWidth = $(window).width(); 
    if (iTargetWidth <= 768) { 
     $(".b").insertAfter(".e"); 
     $(".c").insertBefore(".a"); 
    } 
    }); 
}) 

Answer 1

1. 列即與class="col-*-*"元素對左右填充的15px的。

2. 帶有container類的元素在左側和右側有15px的填充。 row類的左右邊距爲-15px。這消除了container的填充效果。

3. 全部col-*-*類是相對的。

4.To你就需要使用像pull-md-left或pull-sm-right

班爲了更好地理解參考文檔上http://getbootstrap.com/components/