css - Bootstrap 重新排列移动 View 上的列

Question

我试图让这项工作超过一个小时但没有成功...

在我的桌面版本中，我有 3 列，如下所示:

A,C: col-lg-3B: col-lg-6

[A][B][C]

我希望他们在移动设备上这样显示

A,C: col-sm-6B:col-sm-12

[A][C]
[  B ]

我正在尝试使用 pull-left col-sm-pull-x 和 col-sm-push-x 但我的问题是列保持在相同的垂直位置，类似于这样

    [A]
    [  B ]
  [C]          -> col-sm-pull-6

Answer 1

为了实现这一点，我们会查看您希望 div 在移动设备上出现的顺序，因为这是移动优先框架工作。你的最终结果告诉我们标记应该是 div#a，然后是 div#c，然后是 div#b。从那里我们为 xs、sm、md 的尺寸分配所有类别。现在我们将使用 push 和 pull 在 md 屏幕宽度和更大的屏幕宽度上重新排序。

首先在 xs 和 sm 上创建

[A][C]
[ B  ]

现在在 md 上我们有

[A][C][ B  ]

我们需要将 B 拉回 3 列，并将 C 推到 md 和更大的 6 列。看下面的标记和 fiddle

<div class="container">
    <div class="row">
        <div id="a" class="col-md-3 col-sm-6 col-xs-6">COL A</div>
        <div id="c" class="col-md-3 col-sm-6 col-xs-6 col-md-push-6">COL C</div>
        <div id="b" class="col-md-6 col-sm-12 cold-xs-12 col-md-pull-3">COL B</div>
    </div>
</div>

不需要id。看 fiddle - http://jsfiddle.net/52VtD/6933/