Question

我有这段HTML代码http://jsfiddle.net/tbpqT/

<div class="row">
    <div class="col-xs-12 col-md-6">
        Block A
    </div>
    <div class="col-xs-12 col-md-6">
       Block B
    </div>
</div>

当屏幕尺寸变得非常小时，我会在B座上方得到A座。我真正想要的是座B顶部的B座，同时保持中+屏幕的原始订单。

我的一个想法是在“Block A”之前制作一个“Block B”的副本，并在隐藏第二个版本的“Block B”时使其显示为小尺寸。我觉得这太麻烦了。也许有更优雅的方式来实现这种效果？

Answer 1

您可以使用拉动和推动

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
       Block B
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        Block A
    </div>
</div>

演示：http://jsfiddle.net/Wdrjx/
文档：http://getbootstrap.com/css/#grid-column-ordering

使用Bootstrap阻止重新排列

1 个答案: