html - 使用 Bootstrap 3 重新对齐列

Question

我正在使用 Bootstrap 编写一篇包含三栏的文章。当我在大屏幕上工作时，它看起来像

但是当我在小屏幕上工作时，我希望它看起来像

我怎样才能做到？

Answer 1

您将不得不使用 Column ordering使用 .col-xx-push-* 和 .col-xx-pull-* 类。

一个解决方案可能是这样的:

<div class="row">
  <div class="col-md-6 col-md-push-2 col-sm-12">B</div>
  <div class="col-md-2 col-md-pull-6 col-sm-6">A</div>
  <div class="col-md-4 col-sm-6">C</div>
</div>

通过更改md 和sm 来满足您的实际需求，以实现不同的断点。

上面的例子:jsbin.com/reqilege