jquery - Bootstrap 三列顺序

Question

我在 xs 设备上有一个 3 列的 Bootstrap 行，它们彼此堆叠在一起，如下所示:

| A |
| B |
| C |

我需要它们在 sm 设备上重新排列如下:

| A | C |
| B |   |

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

此处开始代码:

http://jsfiddle.net/u1fedjwq/

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

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

Answer 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 获得。 .