如何更改列的堆叠顺序？

Question

使用 Bootstrap 3，我有一个非常简单的布局，如下：

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            Header Content Left
        </div>
        <div class="col-sm-4">
            Header Content Middle
        </div>
        <div class="col-sm-4">
            Header Content Right
        </div>
    </div>
</div>

JSFiddle

在较小的设备上，我希望它不是按照自然顺序堆叠，而是像这样堆叠：

Header Content Middle
Header Content Right
Header Content Left

我不知道具体如何实现，请问有人可以指点一下吗？

- fightstarr20

---

请查看pushе’Њpull - 请参见此处的列排序 http://getbootstrap.com/css/ - Dan

我也很想知道！好问题。 - jleggio

@Dan想指出的是这个链接：http://getbootstrap.com/css/#grid-column-ordering。对于这个问题，我肯定会使用http://www.bootply.com/而不是jsfiddle。 - Simple Sandman

Answer 1

为了补充neilhem的回答，你需要使用推送和拉动修饰符。

从文档中可以看到：

使用 .col-md-push-* 和 .col-md-pull-* 修饰类轻松更改我们内置的网格列的顺序。

基本上，这些修饰符所做的就是根据您提供的偏移量向右（推）或向左（拉）移动列，其中起始点基于行中列的顺序。它可以这样解读：

/* column  size  direction  offset */
   .col    -sm   -push      -4 

因此，对于您的示例，您需要类似以下内容：

<div class="row">
    <!--first column so start at 0 then push it to the right 4 -->
    <div class="col-sm-4 col-sm-push-4">
       Header Content Middle
    </div>

    <!-- start at 4 then push to the right 4 -->
    <div class="col-sm-4 col-sm-push-4"> 
        Header Content Right
    </div>

    <!-- start at 8 then pull to the left 8 -->
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>

演示

---

以下是一步一步进行的视觉分解:

1. before reordering:

   [    column 1    ][    column 2    ][    column 3    ]
   

   example

2. push the first column 4 offsets:

   [    offset 4    ][   column 1-2   ][    column 3    ]
                         ^ they are on top of each other at this point
   

   example

3. push the second column 4 offsets:

   [     offset 4    ][    column 1    ][  column 2-3   ]
                                           ^ they are on top of each other at this point
   

   example

4. pull the third column 8 offsets:

   [     column 3    ][    column 1    ][  column 2     ]
         ^ column 3 falls into the open offset caused by column 1's push 
   

   example

- Carrie Kendall

Answer 2

Bootstrap的col-**类具有position: relative;属性。因此，当您额外设置col-**-push-**或col-**-pull-**类时，您可以使用left或right属性来更改列顺序移动。

您可以尝试以下操作：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-push-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-push-4">
        Header Content Right
    </div>
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>
</div>

这里有一个在Codepen上的示例链接

P.S. 值得注意的一点是，我已经改变了列的顺序，以便在折叠列时达到正确的列顺序。

- Rakhat

---

回答不错，但最好解释一下pull-*和push-*类是做什么的，因为对提问者可能不是立即显而易见的。 - Bojangles

谢谢您的解释，我已经阅读了一些资料，我觉得我已经掌握了它。 - fightstarr20

Answer 3

使用拉/推类来实现你想要的效果，示例如下：

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        Header Content Left
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Right
    </div>
</div>

http://jsfiddle.net/DTcHh/1040/

- belens