Css 引导网格元素顺序（上下另一个元素）

我想知道如何使用Bootstrap正确订购。我要么垂直，要么水平

桌面显示如下：

[-2-][1]
[-2-][3]
[-2-]

移动设备应显示如下内容：

[-1-]
[-2-]
[-2-]
[-2-]
[-3-]

而[2]是一个单独的元素，只是更高

这就是我走了多远。这显然是错误的，因为它在桌面上看起来不错，但在移动设备上却不好

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        <div class="row">
            <div class="box-a col-sm-12">1</div>
            <div class="box-b col-sm-12">3</div>
        </div>
    </div>
    <div class="box-c col-sm-8 col-sm-pull-4">2</div>
</div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            <div class="row">
                <div class="box-a col-sm-12">1</div>
                <div class="box-b col-sm-12">3</div>
            </div>
        </div>
        <div class="box-c col-sm-8 col-sm-pull-4">2</div>
        <div class="box-b2 col-xs-12">3</div>     
    </div>
</div>

1.
3.
2.

我被柱子卡住了。但如果我先尝试移动：

<div class="container">
   <div class="row">
      <div class="col-sm-4 col-sm-push-8 box-a"> 1</div>
      <div class="box-c col-sm-8 col-sm-pull-4">2</div>
    </div>
   <div class="row">   
     <div class="box-b col-sm-4 col-sm-offset-8"> 3</div> 
   </div>
<div>

1.
2.
3.

---

我被卡在行上（在移动设备上看起来不错，但在桌面上没有）。

我是通过在移动设备（xs）上拉动列并将它们全部设置为12列来实现的。您可以将

sm

断点更改为您想要的任何断点

看看小提琴：

1.
2.
3.

我认为bootstrap没有能力做到这一点

[-2-][1]

[-2-][3]

[-2-]

移动设备应显示如下内容：

[-1-]

[-2-]

[-2-]

[-2-]

[-3-]

---

如果这样就可以了

[-2a-][1]

[-2b-][3]

[-2c-][4]

移动设备应显示如下内容：

[-1-]

[-2a-]

[-3-]

[-2b-]

[-4-]

[-2c-]

1.
2a
3.
2b
4.
2c

---

我试图通过使用bootstrap提供给我们的默认类来解决这个问题，但我找不到解决方法，所以我选择：

HTML

如您所见，第3行是重复的，以便在移动设备上订购

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        <div class="row">
            <div class="box-a col-sm-12">1</div>
            <div class="box-b col-sm-12">3</div>
        </div>
    </div>
    <div class="box-c col-sm-8 col-sm-pull-4">2</div>
</div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            <div class="row">
                <div class="box-a col-sm-12">1</div>
                <div class="box-b col-sm-12">3</div>
            </div>
        </div>
        <div class="box-c col-sm-8 col-sm-pull-4">2</div>
        <div class="box-b2 col-xs-12">3</div>     
    </div>
</div>

---

请告诉我它是否对您有帮助，如果它是您想要的，谢谢。

谢谢，效果很好。

说：我在哪里可以找到关于“向右拉”和“向左拉”的文档？取消链接“col-xx-push-x”我在引导文档中找不到它。@Elias-它们是简单的浮点类。您可以在CSS选项卡的“快速浮动”下找到它们。此处链接：。此外，如果这个答案有效，不要忘了将它标记为已被任何其他正在寻找答案的人接受！嘿，希德，它确实有效，但我想避免重复和隐藏元素。这就是为什么我觉得另一个答案更优雅一点。