Bootstrap - 所有设备的更改顺序

Question

我使用的是Bootstrap 3.3.5。在＆＃34;中型设备＆＃34;完美无缺，结构如下： A B C.但是当我想在Small设备上显示时，结构是：

A
C
B

我想：

A
B
C

我的代码是：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-12">A</div>
        <div class="col-md-4 col-sm-12 col-md-push-4">C</div>                
        <div class="col-md-4 col-sm-12 col-md-pull-4">B</div>   
    </div>
</div>

我无法移动div。我只能通过引导样式移动。

Demo

你能帮帮我吗？ 非常感谢你..

Answer 1

您正在寻找“推”和“拉”类。见Bootstrap Column Ordering Documentation.

编辑：我想我误解了你的问题。如果我现在正确读取它，看起来你正试图用“b”的位置实际切换“c”的位置。如果是这种情况，那么仅使用Bootstrap是不可能的，因为您正在使用12个单位列。我在堆栈溢出中找到了一些解决方案，它们使用媒体查询魔法来移动div。以下是一些参考文献：

Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Swap DIV position with CSS only

如果您仍然遇到问题，或者您仍然不确定如何实施此解决方案，请告诉我们，我们将一起完成您的代码。