如何在超小型设备中重新排列引导网格

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。

但在小型显示器中，我想重新排列布局，

• 第一格将获得完整宽度的完整行
• 第三分区将在第二分区之前，并以中心对齐的方式整行
• 第2个和第4个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>

和其他的布局

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

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

Answer 2

您正在说的是将第三列放在第二列之前，并为其分配完整的宽度，引导程序将不会执行此操作。

仅当这些列显示为具有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％。

演示： 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;}

}