在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 class="col-sm-6 col-lg-3"> (...)

现在，为了实现您的设计，您需要这样做：

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...我所做的是将第二列与第三列颠倒过来，以便它们满足我对较小屏幕的需求，然后通过使用推拉我针对较大屏幕进行调整。

编辑：这是一个工作小提琴：

http://jsfiddle.net/ujrwyrbr/2/