Bootstrap 三列顺序答案

【问题标题】：Bootstrap three columns orderBootstrap 三列顺序
【发布时间】：2015-03-23 23:33:19
【问题描述】：

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

| A |
| B |
| C |

我需要它们在sm 设备上重新排列，如下所示：

| A | C |
| B |   |

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

此处开始代码：

http://jsfiddle.net/u1fedjwq/

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

顺便说一句，我们可以从sm订单开始，然后安排移动订单，对吗？

【问题讨论】：

在您的 col-xs-12 课程中额外使用 col-sm-6。当您的俱乐部数量大于 12 时，Bootstrap 的默认 12 列网格会换行到下一行。
你能发布一些代码，在哪里添加这个 col-sm-6？

标签： jquery html css twitter-bootstrap

【解决方案1】：

xs 设备上的响应式一列布局和sm（及以上，只要没有md 或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 获得。

【讨论】：

你的例子是错误的。我需要的是 A 列和 B 列右侧的最后一列 C。
抱歉，昨晚我记得C 在第二排。我去看看。

【解决方案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>

【讨论】：

如果有人对此剪辑有任何问题，请解释原因..？我也会很高兴学习它，这是什么问题..？
您的代码似乎产生了我需要的结果，但我的结构需要一行用于 3 列，因为我仍然需要其他我已经工作的 md 和 lg 订单，因此将您的解决方案限制为一个正如我在我的问题中所说，三列的行。感谢您的努力，我还是为您的努力投了您的票，不知道为什么其他人投了您的票。
我将我的设计更改为基于您的代码而不是我的原始设计，它只是给了我从您的代码开始的想法。然后为更大的屏幕重新排列列。

【解决方案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>

【讨论】：

即使你的代码是错误的，你的代码意味着B列和C列的数据应该重复，这是页面上的一行数据将重复数十次，这意味着数据和页面尺寸会过大。当然还有其他解决方案。