html - 如何更改列的堆叠顺序？

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

我对如何实现这一目标感到困惑，任何人都可以指出正确的方向吗？

Answer 1

为了扩展 neilhem 的答案，push and pull修饰符就是您要找的。

来自文档:

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

基本上，这些修饰符的作用是根据您提供的偏移量推(向右移动)或拉(向左移动)列，其中起点基于列在行中的顺序。可以这样读:

/* 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>

DEMO

---

以下是逐步发生的事情的直观分解:

1. 重新排序前:

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

   example

2. 将第一列推 4 个偏移量:

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

   example

3. 将第二列推 4 个偏移量:

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

   example

4. 将第三列拉出 8 个偏移量:

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

   example