twitter-bootstrap - Bootstrap 重新组织有关媒体更改的列

Question

感谢更新。我会提供更多信息。提供的解决方案有效。我应该添加更多信息，因为它有点复杂，我当时没有意识到。

A 栏是一个简介B列是绿色框C列是黄色框D 列是 blurb 2E列是绿色方框F 列是黄色框。

我在 Bootstrap 中得到了以下表/列结构，如下所示。在桌面上，它本质上是:

A | B | C  
D | E | F

我想做的是在压缩到中等大小的 View 时重新排列，例如它看起来像平板电脑

|   A   |  
| B | C |  
| E | F |  
|   D   | << out of its natural order

这样下去，广告，绿色，黄色，绿色，黄色，广告 2。

然后在移动浏览器上

A  - blurb 1
B  - green
C  -yellow
F - green   << out of order 
E - yellow  << out of order
D - blurb 2 << out of its natural order

我已经尝试过使用 bootstrap 进行推拉操作，但我认为我做错了，因为它总是会扭曲网格。

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

提前致谢。

<div class="container">
    <div class="row clearfix">
        <div class="col-lg-4 col-md-12 col-sm-12 banner-box1">
                               
                
            A - blurb 1
                
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-green">
            B - Green
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-yellow">
            C - Yellow
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-lg-4 col-md-12 col-sm-12 banner-box3">
            D - Blurb 2
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-yellow">
            E - Green
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-green">
            F - Yellow
        </div>
    </div>
</div>

Answer 1

尝试像这样排列行和列:

<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-4">
      <p>A</p>
    </div>
    <div class="col-md-6 col-lg-4">
      <p>B</p>
    </div>
    <div class="col-md-6 col-lg-4">
      <p>C</p>
    </div>
    <div class="col-md-6 col-lg-4 col-lg-push-4">
      <p>E</p>
    </div>
    <div class="col-md-6 col-lg-4 col-lg-push-4">
      <p>F</p>
    </div>
    <div class="col-md-12 col-lg-4 col-lg-pull-8">
      <p>D</p>
    </div>
  </div>
</div>

这是一个 bootply 示例:http://www.bootply.com/z0ZorgkTOR