html - Bootstrap 交替布局以堆叠在移动设备中

Question

我在 Bootstrap 中有一个基本的响应式布局，其中图像位于文本 block 旁边。在第一行中，图像在左侧，在第二行中，图像在右侧。这在页面中重复。

问题:当用户在移动设备上时，图像全宽(它们应该如此)，但是对于图像右对齐的任何行，它位于文本下方而不是上方(参见代码以下)。我明白为什么会这样，但我想知道 bootstrap 中是否有一个类可以纠正这个问题？它一定很常见，那么这里建议的最佳做法是什么？

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive"/>
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive" />
          </div>      
    </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

您正在寻找类似嵌套列 的东西:这是文档:http://getbootstrap.com/css/#grid-nesting

Bootstrap :http://www.bootply.com/qsdH9jr70F

看这段代码:特别是 col-sm-push-6 和 col-sm-pull-6

HTML :

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive">
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">      
          <div class="col-sm-push-6 col-sm-6 col-md-6">   <!--   HERE   -->
            <img src="url" class="img-responsive">
          </div>   
          <div class="col-sm-6 col-sm-pull-6 col-md-6">   <!--   HERE   -->
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>   
    </div>
</div>