Html 如何更改列的堆叠顺序？

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

---

我被困在如何实现这一点上，有人能给我指出正确的方向吗？

Bootstrap的

col-**

类有

位置：relative属性。因此，当您另外设置
col-**-push-**
或
col-**-pull-**
类时，您可以使用
left
或
right
属性更改列移动顺序

您可以这样尝试：

Header Content Middle
Header Content Right
Header Content Left

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


标题内容中间
标题内容权限
左标题内容

代码笔中的示例是

还有一件事需要知道，在我的示例中，我已经更改了列顺序，以便在列折叠时获得正确的列顺序。
使用如下拉/推类实现您想要的：

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


左标题内容
标题内容中间
标题内容权限


为了扩展neilhem的答案，修饰符就是您要寻找的

从文档：

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

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

Header Content Middle
Header Content Right
Header Content Left

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

/*列大小方向偏移*/
.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>


将第一列按4个偏移：

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

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


将第二列按4个偏移：

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

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


拉动第三列8个偏移：

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


查看
推送
和
拉送
-请参阅此处的专栏排序，我也很想知道这一点！这个链接是@Dan想要指出的。对于这个问题，我肯定会使用JSFIDLE而不是JSFIDLE。回答得很好，但是如果解释一下
pull-*
和
push-*
类的作用，会更好，因为它可能不会立即对操作人员显而易见。谢谢你的解释，我已经读了一些书，我想我已经掌握了窍门