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

我在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>

任何帮助都将不胜感激。

最佳答案

您正在寻找类似嵌套列的内容：这是文档：http://getbootstrap.com/css/#grid-nesting
启动：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>