jquery - 以响应模式对Twitter Bootstrap行重新排序

我正在开发一个网站。我得到了7行所有内容，第二个img放在右侧，文本在左侧，第二个img放在左侧，文本在右侧。在响应模式下，我希望所有img都显示在顶部。我如何在保持现有桌面格式的同时实现这一目标。这是在响应模式下img应该显示在顶部的代码：

<hr>
      <!-- Row 2 -->
<div class="container">
  <div class="row padding">
     <div class="col-md-6" style="text-align:center;">
      <h2>Phase 2:</h2>
         <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
     </div>
     <div class="col-md-6">
      <img src="images/image1.png" class="img-responsive" alt="search"/>
     </div>
  </div>
      <hr>
      <!-- Row 3 -->

提前致谢！

最佳答案

您可以使用media queries和display: flex属性并对元素进行排序。

但首先将自定义类添加到2 col-md-6。我添加了.image和.text。请注意，我已经添加了<=768px设备的媒体查询。根据您的要求更改宽度。

的HTML

<div class="container">
 <div class="row padding">
   <div class="col-md-6 text" style="text-align:center;">
     <h2>Phase 2:</h2>
     <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
   </div>
   <div class="col-md-6 image">
     <img src="http://placehold.it/350x150" class="img-responsive" alt="search">
   </div>
 </div>
</div>

的CSS

@media (max-width:768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .text {
    order: 2;
  }

  .image {
    order: 1;
  }
}

Bootply Demo

关于jquery - 以响应模式对Twitter Bootstrap行重新排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30263327/