Question

我有一个简单的引导程序布局，看起来像md- * size

1 - 2
3 - 4
5 - -

所以基本上在xs我的布局看起来像这个

我的目标是让我的布局看起来像是md尺寸，但是在xs- *和sm- *尺寸上更改2和4列，所以它们看起来像这样：

我尝试过两排或者一排，推拉 - 没有任何帮助。

Answer 1

如果没有代码预览，很难说，但您可以尝试使用

class="visible-xs-* visible-sm-*"

用于 1-4-3-2-5 移动布局与

结合使用

class="hidden-md"

用于桌面布局。同时尝试使用隐藏/可见与xs / md结合进行一些实验 - 请看一下：http://getbootstrap.com/css/#responsive-utilities

如果您无法实现您在响应式布局方面的尝试，则可以对布局进行独立更改。但是再次：代码预览请！

Answer 2

对于这种确切的布局，您需要对至少一个需要重复内容的列使用实用程序类。这是一个复制＆＃39; 3＆＃39;柱：

  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12">1</div>
        <div class="col-md-12 col-md-push-12">4</div>
      </div>
    </div>
    <div class="col-md-6 visible-xs">3</div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12">2</div>
      </div>
    </div>
    <div class="col-md-6 col-md-pull-6 hidden-xs">3</div>
    <div class="col-md-12">5</div>
  </div>

http://bootply.com/bLFQQ1aOhM

bootstrap3推到第2行，或在1长行内

2 个答案: