Bootstrap重新排序3x2

Question

我正在使用Bootstrap版本3来创建响应式网站。

我希望md设备上的这种布局更广泛。

并且视口上的此布局小于md。

这是我的over-md视图的代码。我正在使用玉，请在需要时请求HTML。

.container
.row
  .col-md-4
    |Image 1
  .col-md-4
    |Image 2
  .col-md-4
    |Image 3
.row
  .col-md-4
    |Text 1
  .col-md-4
    |Text 2
  .col-md-4
    |Text 3

以下屏幕截图是over-md和under-md宽度的结果浏览器视图：

宽视口（超过md）

瘦视口（under-md）

我的问题是如何将细视图中的行顺序更改为我需要的顺序？

编辑： 我改变了我的代码。有组织的行以匹配较小的视口要求，并尝试使用.col-md-push / pull重新组织网格元素以用于更宽的视口（md及以上）。

.container
.row
  .col-md-4
    |Image 1
  .col-md-4.col-md-push-8
    |Text 1
  .col-md-4.col-md-pull-4
    |Image 2
  .col-md-4.col-md-pull-4
    |Text 2
  .col-md-4
    |Image 3
  .col-md-4
    |Text 3

此代码生成以下内容 - 几乎在那里，但元素不会在行之间换行，而是被推到12列容器之外。我希望他们能像他们在这里做的那样换行http://www.bootply.com/121418

Answer 1

嵌套网格将解决此问题。您基本上在列中创建另一行，然后在其中添加列。见下文。从引导站点读取嵌套列： http://getbootstrap.com/css/#grid

<div class="row">
   <div class="col-sm-12 col-md-4">
     <div class="row">
       <div class="col-md-12">Image 1</div>
       <div class="col-md-12">Text 1</div>
     </div><!-- end inner row-->
    </div><!-- end col-sm-12 col-md-4-->
   <div class="col-sm-12 col-md-4">
     <div class="row">
       <div class="col-md-12">Image 2</div>
       <div class="col-md-12">Text 2</div>
     </div><!-- end inner row-->
    </div><!-- end col-sm-12 col-md-4-->
    <div class="col-sm-12 col-md-4">
     <div class="row">
       <div class="col-md-12">Image 3</div>
       <div class="col-md-12">Text 3</div>
     </div><!-- end inner row-->
    </div><!-- end col-sm-12 col-md-4-->
</div><!-- end outer row-->

Answer 2

使用带col-md的.col-xs类  这将解决您的问题 http://getbootstrap.com/css/ 读出那里的网格选项。