如何更改列的堆叠顺序？ [英] How to change stacking order of columns?

问题描述

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

 < div class =container> 
< div class =row> 
< div class =col-sm-4> 
标题内容left 
< / div> 
< div class =col-sm-4> 
标题内容Middle 
< / div> 
< div class =col-sm-4> 
标题内容正确
< / div> 
< / div> 
< / div> 
  

JSFiddle

在较小的设备上，而不是以自然顺序堆叠，我希望它堆叠如下：

标题内容中间
标题内容正确
标题内容Left


我被困在如何实现这一点，任何人都可以指向正确的方向？

解决方案

Bootstrap的 col - ** 类有 position：relative; 属性。所以当你另外设置 col - ** - push - ** 或 col - ** - pull - ** 使用左或右属性移动列顺序的类。

您可以这样尝试：

 < div class =container 
< div class =row> 
< div class =col-sm-4 col-sm-push-4> 
标题内容Middle 
< / div> 
< div class =col-sm-4 col-sm-push-4> 
标题内容正确
< / div> 
< div class =col-sm-4 col-sm-pull-8> 
标题内容left 
< / div> 
< / div> 
< / div> 
  

Codepen中的示例为此处

PS有一件事要知道，我已经更改列顺序在我的示例中，以实现列的顺序，当列折叠。

Using Bootstrap 3, I have a really simple layout like:

<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

On smaller devices, instead of it stacking in the natural order I would like it to stack like this:

Header Content Middle
Header Content Right
Header Content Left

I am stuck on how to achieve this, can anyone point me in the right direction?

解决方案

Bootstrap's col-** classes have position: relative; property. So when you set additionally col-**-push-** or col-**-pull-** classes you change column order moving using left or right properties.

You can try like this:

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

Example in Codepen is here

P.S. One thing to know I have changed column order in my example to achieve right column order when columns are collapsed.

这篇关于如何更改列的堆叠顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！