Css 引导将相同宽度的列排列在一起

我有一个问题，重新排序列和堆叠它时，他们得到相同的宽度。这是我网站上的代码：

。。。
col-1(
col-2（主要内容）
col-3
...

因此，我试图在小型设备上实现以下目标：

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
| col-3 | |       |
|       | |       |
--------- |       |
          ----------

但我得到的是：

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
          |       |
          |       |
          |       |
--------- ---------
| col-3 | 
|       | 
---------

---

我如何才能将这两个列堆叠在一起？

这是因为您的列1和列2位于同一行，但列3是分开的。您需要的是：

<div class='row'>
  <div class='col-xs-6'>
    <div class='row'>
      <div class='col-xs-12'>
        Col-1
      </div>
    </div>
    <div class='row'>
      <div class='col-xs-12'>
        Col-3
      </div>
    </div>
  </div>
  <div class='col-xs-6'>
    Col-2
  </div>
</div>

Col-1
Col-3
Col-2

假设col-2比你能做的其他颜色都高

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

2.
1.
3.

演示（选项1）：

另一个选项是嵌套

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

2.
1.
3.

---

演示（选项2）：

使用行div分隔最后一行，然后使用col类进行调整。 我相信我得到了你想要的东西。 如果您单击移动设备，它将正确堆叠，没有空格

下面是代码：

<div class="row col-md-8">
<div class="col-md-6 col-xs-4 " style="background:lightblue">col-1 (</div>
<div class="col-md-6 col-xs-8" style="background:green">col-2 (main content)</div>
</div>
 <div class="row col-md-4">
 <div class="col-md-12 col-sm-2 col-xs-4" style="background:lightblue">col-3</div>
</div>

col-1(
col-2（主要内容）
col-3

Probablu duplicate-这非常接近！在某些页面中，col-2较短，似乎不起作用。有什么建议吗？我测试了第二个选项，如果col-2较大，我们会遇到与现在相同的问题。col-3将位于该列的末尾。经过测试，我们遇到了与第一个选项相同的问题。当col-2较短时r第三列只是不显示。我试图找到如何使第二列占据页面的所有高度，以防止出现这种情况。这可能是一个很好的方法，对吗？