Question

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

| A |
| B |
| C |

我需要在sm设备重新排列这样的设备：

| A | C |
| B |   |

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

在这里开始代码：

http://jsfiddle.net/u1fedjwq/

请注意，这一行数据最多会在包含不同数据的页面上重复100次，这意味着任何通过show或hide复制列的解决方案都将被解除。

作为旁注，我们可以从sm订单开始然后安排移动订单，对吗？

Answer 1

xs设备上的响应式一列布局示例代码和sm上的两列布局（以及上面，只要md或{{1}没有类}）看起来像这样：

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>的屏幕上重新排序内容B和内容C，请使用以下框架：

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>和pull课程，但没有运气。只要内容B不是那么大，这应该是一个简单的解决方案。

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

Answer 2

我认为，添加一些额外的标签可以轻松解决这个问题。这是

<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 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三列顺序

3 个答案: