DEMO：https://jsbin.com/nuhoba

Question

我有html标记如下，

            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                    Some contents
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
                    Some Content
                </div>
                <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12"  >
                    Some Content
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right"  >
                    <div class="company-add-btn"><a href="#">+ Add more companies</a></div>
                </div>
            </div>

在大型显示器中，它可以正常工作，在列中构造四个div。

但在小型显示器中，我喜欢重新安排布局，

第一个div将获得一个完整的行宽
第三个div将出现在第二个div之前，并采用中心对齐的完整行
第2和第4分区将排成一排，第二排停在左边，第四排右移。

使用bootstrap col-md-pull- *或col-md-push- *只会在一行内进行重新排序。所以这不会奏效。

一个可能的解决方案是复制每个媒体断点的标记，但是否有更好的方法呢？

任何人都可以提出任何建议吗？或者指出一个开始寻找解决方案的好地方？

Answer 1

我建议（即使它很脏）将视图添加两次，一次在

中

<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>

和其他＆＃39;布局

<div class="hidden-xs">Your content for everything but XS-grid.</div>

希望有所帮助（期待更好的解决方案;））。

Answer 2

你所说的是在第二列之前放置第三列并为其分配完整的宽度，bootstrap不会这样做。

只有当这些列显示为具有pull-let和pull-right的单行时，才能执行此操作。你唯一的选择就是在这种情况下复制标记，或者写下你自己的css，在第二列之前放置第三列（但这不是一个好主意）。

Answer 3

你可以在小屏幕上隐藏第二个div;然后第三个div将处于第二位。然后你必须在第三个div之后复制第二个div并仅在小屏幕上显示，然后在最后两个div上左右拉动。类似的东西可能有用（这个例子适用于小）：

    <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                Some contents 1
            </div>
            <div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
                Some Content 2
            </div>
            <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
                Some Content 3
            </div>
            <div class="visible-sm col-sm-9 lefty" >
                Some Content 2 - duplicate
            </div>
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty"  >
                <div class="company-add-btn"><a href="#">+ Add more companies</a></div>
            </div>
        </div>

Answer 4

在这种情况下，使用col-xs-12实际上是不必要的，并且在大多数情况下，该列将比使用的最后一个col类低100％。

DEMO：https://jsbin.com/nuhoba

如果你有一个图形来描述你想要的东西会更好。如果我正确地遵循了，那么您将按照它在一个小视口上的顺序来命令你的html - 如果列在同一个.row而且.row不超过12列，那么你可以左右推拉。在任何给定的列类中，每行最多需要添加12列，为了简单起见，我使用了col-sm-X。如果您使用col-md和/或large，这意味着您必须在其他列上使用这些列，但需要在该最小宽度处添加到12。

<强> HTML：

<div class="container">
   <div class="row">
      <div class="col-sm-3">
         A
      </div>
      <div class="col-sm-4 col-sm-push-2 text-center-xs">
         C
      </div>
      <div class="col-sm-2 col-sm-pull-4">
         B
      </div>
      <div class="col-sm-3 text-right">
         <div class="company-add-btn"><a href="#">+ D</a></div>
      </div>
   </div>
</div>

<强> CSS

@media (max-width:767px) {
  .text-center-xs {text-align:center;}

}

如何在超小型设备中重新安装bootstrap网格

4 个答案:

DEMO：https://jsbin.com/nuhoba