使用 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 中。

   <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）。我在这里缺少一些基本的东西吗？请为我指明正确的方向。

编辑：（2014 年 3 月 26 日）

我相信我找到了解决逆序的方法。以适当的顺序创建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>

如您所见，您使用 pull-right 将顶部拉到右侧，这在堆叠时基本上颠倒了顺序。