如何在 XS 屏幕上重新排序引导列？答案

【问题标题】：How can I reorder bootstrap columns on XS screens?如何在 XS 屏幕上重新排序引导列？
【发布时间】：2015-06-11 06:20:07
【问题描述】：

我有一个包含两列的简单引导行：

<div class="row">
    <div class="col-md-5 col-md-push-7">
       This should show on right
    </div>
    <div class="col-md-7 col-md-pull-5">
       This should show on left
    </div>
</div>

我希望第一行显示在右侧，第二行显示在左侧。所有这些都有效，但是当屏幕尺寸变小或超小时，第一列显示在第一位，第二列显示在第二位。

我想在小型和超小型设备上首先显示第二列和第二列。我尝试使用 pull-right 和 pull-left 类来实现这一点，但它不起作用。

非常感谢您的建议。

附：我希望 div 堆叠

【问题讨论】：

您不想使用 col-xs-pull 和 col-xs-push 之类的东西吗？
xs 视口上的列堆叠。您希望它们堆叠，还是希望它们彼此相邻但交换位置？
@MattD 我希望它们堆叠起来

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您想颠倒水平列的顺序，这样的方法可能会起作用：

<div class="row">
    <div class="col-xs-5 col-sm-push-7">
       This should show on right
    </div>
    <div class="col-xs-7 col-sm-pull-5">
       This should show on left
    </div>
</div>

这是JSFiddle demo。

【讨论】：

也许他想要一个堆叠的版本？
@ManojKumar 听起来他想在
@alex 这仍然可能意味着反向堆叠或并排反向。
@MattD OP 说他希望“第一行显示在右侧，第二行显示在左侧”，除了小型和超小型设备。授予他们发布的代码不这样做，但我的。我已经更新了答案，以更具体地说明我的代码的作用。
@alex 他后来说，“我想在小型和超小型设备上首先显示第二列，第二列显示第一列。”使用 OP 编码列堆叠，所以问题是：OP 是否希望它们按该顺序堆叠或并排？除了订单之外，当前输出是否正确，或者对于演示和订单的输出是否完全不正确？这就是 OP 需要澄清的。

【解决方案2】：

如果您确实希望这些堆叠而不是像 cmets 所说的那样并排放置。
如果您希望第二次潜水显示在堆栈顶部，那么您可以这样做。显示和隐藏以在 div/块之间交换。
这是 Fiddle 我将媒体断点设置为 320 像素。

<div class="row showhide1">
    <div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
       This should show on right on larger views
    </div>
    <div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
       This should show on left on larger views
    </div>
</div>

<div class="row showhide2">
    <div class="col-xs-12 bg-primary">
        Was on right, now on top on smaller views
    </div>
    <div class="col-xs-12 bg-info">
        This should show on left on smaller views

    </div>
</div>

【讨论】：

我想避免两组相同的内容。没有别的办法吗？
您好，还有另一种方法......首先不要推/拉，只需按正确的顺序排列 div，而不是通过推拉将它们交换到另一边.有什么理由需要这样做？