Question

我有一个简单的bootstrap行，有两列：

<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>

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

我想在小型和超小型设备上显示第二列第一列和第一列第二列。我试图通过右拉和左拉类实现这一点，但它没有用。

非常感谢您的建议。

P.S。我希望div堆叠

Answer 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。

Answer 2

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

<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>

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

2 个答案: