css - 如何使用 Bootstrap (台式机/智能手机)切换列位置？

Question

我怎样才能做到以下几点？推/拉？

桌面:

智能手机:

我从这个开始。

<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
        Some Small Object
</div>
<div class="col-md-6 col-sm-12 col-xs-12 text-center">
        Some Larger Object
</div>
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
        Some Small Object
</div></div>

解决方案(03-21-2016):

<div class="row">
<div class="col-xs-6 col-md-3 text-center">
  A
</div>
<div class="col-xs-6 col-sx-push-0 col-md-3 col-md-push-6 text-center">
  C
</div>
<div class="col-xs-12 col-sx-pull-0 col-md-6 col-md-pull-3 text-center">
  B
</div></div>

Answer 1

看看Grid column reordering在Bootstrap docs .

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

这是一个 good example关于如何使用列重新排序。