twitter-bootstrap-3 - 在 Twitter Bootstrap 3 中组织 3 列到 2 列

Question

所以这完全有效(在小屏幕上从 4 列变为 2 列):

<div class="row">
    <div class="col-lg-3 col-sm-6"> 1</div>
    <div class="col-lg-3 col-sm-6"> 2</div>
    <div class="col-lg-3 col-sm-6"> 3</div>
    <div class="col-lg-3 col-sm-6"> 4</div>
</div>

和我的 3 列一样，但是中间的列堆叠在第三列的顶部(那时是右/第二列)。

<div class="row" id="footer">
    <div class="col-lg-3 col-sm-6">
        1
    </div>
    <div class="col-lg-3 col-sm-6">
        2
    </div>
    <div class="col-lg-6 col-sm-6">
        3
    </div>
</div>

如何告诉中间列堆叠在第一列上方或下方？例如 col-sm-pull-6 不起作用。

想要的结果:

1 - 3
2 - ..

切换 2 和 3 然后使用推拉的问题是第 2 列仍然位于第 3 列的顶部。我需要它们像我想要的结果“图表”一样。

编辑:我能做的是给出第一列 col-sm-12。这会将另外 2 个推下。这样的顺序是好的，而且由于它是用于页脚的，因此段落列位于完整的底部这一事实也不错。但我仍然愿意接受更好的建议。

网格现在看起来像这样:

1
2 - 3

Answer 1

请务必注意具有不同高度的 div。这些将导致事情不会像您预期的那样一直向左包裹。

您可以使用 bootstrap 清除修复(甚至有条件地)解决此问题，例如:

<div class="clearfix visible-sm"></div>

把它放在你想要以 -sm 大小开始新行的 div 之后。根据需要重复。