Question

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

A列是一个模糊点 B列是绿色框 C列是黄色框 D列是模糊2 E列是一个绿色框 F列是黄色框。

我在bootstrap中有以下表/列结构，如下所示。在桌面上它基本上是：

A | B | C  
D | E | F

我想做的是将它重新调整为中等大小的视图，例如平板电脑看起来

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

这是一个很好的例子：http://www.bootply.com/z0ZorgkTOR

引导程序重新组织媒体更改列

1 个答案: