如何更改列的堆叠顺序？

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的答案,推拉式修改器正是您所需要的.

来自doc:

使用.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>

DEMO

这是一步一步的视觉细分:

1. 在重新排序之前:

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

   例

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

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

   例

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

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

   例

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

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

   例