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修饰符是你正在寻找的。

来自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

以下是逐步进行的视觉细分：

：

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

example

推送第一列4个偏移：

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

example

推送第二列4个偏移量：

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

example

拉出第三列8个偏移量：

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

example

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中的示例是here

P.S。有一件事要知道我在我的示例中更改了列顺序，以便在列折叠时实现正确的列顺序。

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/

如何更改列的堆叠顺序？

3 个答案: