在响应式引导程序中将列的顺序切换为行

Question

我想知道我试图通过Bootstrap实现的目标是否可行。我正在使用Bootstrap 3的推/拉来连续排列列。我对移动视图中的其他内容呈现方式感到满意，但有一个例外。我想要发生的是切换两列的顺序，这些列在移动设备上呈现为行 - 作者和标题。

见附件

http://bootply.com/109874

在移动版中，我希望更改作者和标题的位置。我希望Title只在移动视图中出现在作者的顶部。我认为这可以通过推/拉来实现。我怎样才能做到这一点？

Answer 1

您无法通过推拉来更改堆叠的源顺序。我认为更清晰的解决方案是使用响应式实用程序：

http://jsbin.com/aXiHOFah/1/edit

<div class="container">
 <div class="row">

  <div class="col-sm-8 col-sm-push-4">
   <p class="visible-xs">Title</p>
   <p>Author</p>
   <p class="hidden-xs">Title</p>
    <p><img src="//placehold.it/460x340" class="visible-xs img-responsive"></p>
   <p>Description</p>
  </div>
  <!--./col-sm-8 col-sm-push-4-->

  <div class="col-sm-4 col-sm-pull-8 hidden-xs">
   <img src="//placehold.it/460x340" class="img-responsive">
  </div>
  <!--./col-sm-4 col-sm-pull-8-->

 </div>
 <!--./row -->
</div>