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

Answer 2

Manoj的解决方案确实有效，但并不完全兼容浏览器。我建议重新组织HTML，使图像在顶部，然后使用float：right;实现所需的结构。 Bootstrap有一个叫做pull-right的类，它赋予一个浮动元素。代码如下所示：

<div class="container">
  <div class="row padding">
     <div class="col-md-6 pull-right">
        <img src="images/image1.png" class="img-responsive" alt="search"/>
     </div>  
     <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>

当它低于'md'分辨率时，图像现在将显示在文本的顶部。然后，如果您希望在较小的分辨率上居中或左对齐，则可以使用媒体查询来清除浮动。

希望这有帮助

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

2 个答案: