5

所以这完全有效（在小屏幕上从 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 然后使用推拉的问题在于，第二列仍然位于第三列的顶部。我需要它们像我想要的结果“图表”一样。

编辑：我能做的是给第一列col-sm-12。这会将另外 2 个向下推。这样顺序就很好了，因为它是一个页脚，所以段落列完全位于底部这一事实也不错。但我仍然愿意接受更好的建议。

网格现在看起来像这样：

1
2 - 3
4

2 回答 2

2

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

您可以使用引导程序 clearfix（甚至有条件地）解决此问题，例如：

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

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

于 2016-09-17T02:32:00.267 回答
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>

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

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

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

于 2014-10-19T00:23:18.270 回答