如何在 Bootstrap 中为仅较小的屏幕尺寸设置推/拉列

Question

我在页面上有以下布局（使用 Bootstrap 3.2.0）：

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

所以，它在小屏幕上工作得很好（根据下面）。

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

但是，在这里，我只将col-sm-pull-* 和col-sm-push-* 用于小屏幕。但是，推/拉列在中屏和大屏中调用。

如果，我将使用 col-sm-push/pull-* & col-xs-push/pull-* 那么，为什么它是在大屏幕和中屏幕中调用（运行）？

中屏和大屏：

I want to this                  I get this
 ------- --------- -----         ------- ----- ---------
|   1   |    2    |  3  |       |   1   |  3  |    2    |
 ------- --------- -----         ------- ----- ----------

那么，如何将推/拉列设置为仅小屏幕？

这里有什么问题？ 我该如何解决？

不胜感激。

Answer 1

您需要使用*-push-0 和*-pull-0 告诉Bootstrap 不要在md 和lg 上使用推/拉。我还删除了lg，因为单独md 将适用于您的情况。 1-2-3（大型），1-3-2（移动）。

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

演示：http://www.bootply.com/PPTzE3ONur

Answer 2

对col-xs 使用推拉而不是col-sm，即col-xs-push/pull-...

将您的代码替换为：

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-pull-6 col-xs-12">3</div>