jquery - 在响应模式下重新排序 Twitter Bootstrap 行

Question

我正在开发一个网站。我得到了 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 -->

提前致谢!

Answer 1

您可以使用 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