推列到下一行與COL-MD-推*

Question

我有以下6個組成部分：

[1][2] 
[3][4] 
[5][6] 

所有的數據塊具有一排COL-SM-6級。 但由於塊3超過自舉12列結構，它將跳轉到下一行。 完美的是我想要的。

唯一的是，我想交換塊2和3. 但它只適用於同一行上的塊。 所以1和2可以互換，但2和3未（以SM模式）

<div class="container"> 
<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="well"> 1 </div> 
    </div> 
    <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0"> 
     <div class="well"> 2 </div> 
    </div> 
    <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0"> 
     <div class="well"> 3 </div> 
    </div> 

    <div class="clearfix hidden-sm"></div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="well"> 4 </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     <div class="well"> 5 </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     <div class="well"> 6 </div> 
    </div> 
</div> 
</div> 

它將創建：

[1] [2] 
[3] [4] 
    [5][6] 

見 http://www.bootply.com/127062

Answer 1

你說得對，有沒辦法推到下一行Bootstrap 3.x。

但是，如果你認爲 「移動第一」，你會首先創建sm佈局，然後推/拉相應的它大屏幕..

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 1 </div> 
     </div> 
     <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4"> 
      <div class="well"> 3 </div> 
     </div> 
     <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4"> 
      <div class="well"> 2 </div> 
     </div> 

     <div class="clearfix hidden-sm"></div> 

     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 4 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 5 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 6 </div> 
     </div> 
    </div> 
</div> 

http://www.bootply.com/127076

Update Bootstrap 4.x

Now in Boots陷阱4貝塔it's possible to "push" or "pull" columns to the next "row"使用Flexbox的順序的類：

https://www.codeply.com/go/MELnKiqofA