使用Bootstrap 3流體網格“旋轉”布局

Question

我只是從Bootstrap 3開始，努力尋找所需網格的流暢（響應）解決方案。

簡化后應如下所示

適用於台式機和平板電腦：

------------+---------------+-----------
 Label 1.1   Label 2.1       Label 3.1 
 Label 1.2   Label 2.2       Label 3.2

手機 ：

----------+----------
 Label 3.1  Label 3.2     
 Label 2.1  Label 2.2
 Label 1.1  Label 1.2

如您所見，組件需要在較大的屏幕上堆疊成3列，而在較小的列上形成3行，每行2列。

我嘗試了三個塊，每個塊中都有一對組件，但均未成功，如下所示。 它們全都包裹在一個container並row一row 。

   <div class="col-md-4 ">
       <div class="col-lg-12 col-md-12 col-sm-6 col-xs-6">
           <label>Label 1.1</label.1>
           <label>Label 2.1</label>
       </div> 
    </div>

我還嘗試將每個標簽拆分為自己的<div class="col-sm-6"> ，但它對我也不起作用。

在其頂部（如您所見），需要垂直反轉順序。 我當時在考慮push和pull但它們是橫向工作的。

甚至有可能使用純Bootstrap（無自定義CSS）。 我在這里缺少基本的東西嗎？ 請指出正確的方向。

編輯： （03/26/2014）

我相信我找到了解決逆序問題的方法。 以適當的順序創建sm布局，然后使用push和pull在md和lg設備的水平布局中交換每行的第一和第三字段。

仍然不確定如何有機地實現所需的布局（即，沒有具有visible類和hidden類的字段重復）。

Answer 1

假設我什么都沒錯過，這與您指定的兩個布局匹配：

<div class='row'>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>3.1</div>
        <div class='col-xs-6 col-sm-12'>3.2</div>
    </div>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>2.1</div>
        <div class='col-xs-6 col-sm-12'>2.2</div>
    </div>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>1.1</div>
        <div class='col-xs-6 col-sm-12'>1.2</div>
    </div>
</div>

如您所見，您可以使用向右拉動使頂部向右拉動，從而在堆疊時實質上顛倒了順序。