css - 使用 Bootstrap block 重排

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>

当屏幕尺寸变得非常小时，我会在 Block B 之上获得 Block A。我实际上想要的是 Block B 在 Block A 之上，同时保持中等+屏幕的原始顺序。

我的一个想法是在“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