如何在超小型設備中重新排列引導網格

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

}