Bootstrap三列顺序

Question

我在 xs 设备上有一个 bootstrap 行，每行 3 列相互堆叠，如下所示：

| A |
| B |
| C |

我需要在 sm 设备上重新排列如下：

| A | C |
| B |   |

sm 设备上的 C 列应该是 col-sm-3。

此处开始代码：

http://jsfiddle.net/u1fedjwq/

请注意，此行数据将在不同数据的页面上重复最多 100 次，这意味着任何通过显示或隐藏来复制列的解决方案都将被取消。

附带说明一下，我们可以从 sm 订单开始，然后安排移动订单，对吗？

Answer 1

我想，添加一些额外的标签会很容易地解决这个问题。在这里

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-12 alert-success">
                    Column A <br/>
                    Column A <br/>
                    Column A <br/>
                </div>
                <div class="col-xs-12 alert-danger">
                    Column B <br/>
                    Column B <br/>
                    Column B <br/>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6  alert-info">
            Column C <br/>
            Column C <br/>
            Column C <br/>
        </div>
    </div>
</div>

Answer 2

xs 设备上的响应式一列布局和 sm 上的两列布局的示例代码（及更高版本，只要 [=14= 没有类 ] 或 lg) 看起来像这样：

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            Content A
        </div>
        <div class="col-xs-12 col-sm-6">
            Content B
        </div>
        <div class="col-xs-12 col-sm-6">
            Content C
        </div>
    </div>
</div>

要在等于或大于 sm 的屏幕上重新排序内容 B 和内容 C，请使用以下框架：

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            Content A
        </div>
        <div class="col-xs-12 visible-xs">
            Content B
        </div>
        <div class="col-xs-12 col-sm-6">
            Content C
        </div>
        <div class="col-sm-6 hidden-xs">
            Content B
        </div>
    </div>
</div>

内容 B 被复制（在内容 C 之前和之后）并根据屏幕尺寸显示。我玩过 pull 和 push 类，但没有运气。只要内容 B 不是那么大，这应该是一个简单的解决方案。

此代码示例也可在 Bootply 获得。

Answer 3

JsFiddle

您应该使用 **hidde-??** and **visible-??-??** 作为您的 html 结构。因为你的目的比较特殊所以用特殊的代码来解决。有代码：

<div class="container">    
<div class="row">
    <div class="col-xs-12 col-sm-3 alert-success">
        Column A <br/>
        Column A <br/>
        Column A <br/>
        Column A <br/>
    </div>
    <div class="col-xs-12 col-sm-3 alert-danger hidden-sm">
        Column B <br/>
        Column B <br/>
        Column B <br/>
    </div>   

    <div class="col-xs-12 col-sm-3 alert-info">
        Column C <br/>
        Column C <br/>
        Column C <br/>
        Column C <br/>
        Column C <br/>
        Column C <br/>
    </div>
    <div class="col-xs-12 col-sm-12 alert-danger visible-sm-block">
        Column B <br/>
        Column B <br/>
        Column B <br/>
    </div>   
</div>

Bootstrap三列顺序

Bootstrap three columns order

html

css

jquery

twitter-bootstrap