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

如何在XS屏幕上重新排序引导列?,第1张

我有一个简单的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堆叠

最佳答案:

2 个答案:

答案 0 :(得分:3)

如果你想要反转水平列顺序,这样的东西可能会有效:

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

答案 1 :(得分:-1)

如果你确实希望这些是叠加而不是像评论所说的那样并排 如果您希望第二次潜水显示在堆栈顶部,那么您可以这样做。显示和隐藏以在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> 
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复