bootstrap列訂購網格移動桌面

我有3個div，我想安排在桌面上以特殊的方式。bootstrap列訂購網格移動桌面

3周的div是：

註冊
新的崗位
新聞

移動是應該互相堆疊是這樣的：

signup 
new post 
news

但在桌面上應該是這樣的：

[news - 8 size] [signup - 4 size] 
       [new post - 4 size]

我用引導推拉功能，但仍然無法找到神奇的解決方案。

我的代碼：http://codepen.io/tzookb/pen/beEvVd

來源

2016-06-10 Tzook Bar Noy

爲什麼不使用2行？ –

請告訴我怎麼樣，不知道如何移動行：/ –

喜歡這個？ https://jsfiddle.net/xu47j54f/

大量的這樣做的方法...

你可以在第二列中使用嵌套行，如下所示：

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     Column 1 
    </div> 
    <div class="col-sm-6"> 
     <div class="row"> 
     <div class="col-xs-12"> 
      Column 2 - Row 1 
     </div> 
     <div class="col-xs-12"> 
      Column 2 - Row 2 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

編輯 - 按下面的評論，結合推拉應該給你在手機大小行排序所需的輸出：https://jsfiddle.net/xu47j54f/1/

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 col-sm-push-6"> 
     <div class="row"> 
     <div class="col-xs-12"> 
      Column 2 - Row 1 
     </div> 
     <div class="col-xs-12"> 
      Column 2 - Row 2 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-6 col-sm-pull-6"> 
     Column 1 
    </div> 
    </div> 
</div>

來源

2016-06-10 10:48:54

感謝您的幫助，但在您需要的示例中，這意味着「第2行 - 第2行應該在左上角..在您的版本中仍然在右邊的底部 –

第二個例子是一樣的...看看我的描述，看看divs應該如何對齊 –

@TzookBarNoy，你可以在這種情況下使用組合的推/拉方法：https：/ /jsfiddle.net/xu47j54f/1/ –

bootstrap列訂購網格移動桌面

回答

相關問題