根据屏幕大小在引导程序中堆叠列？

Question

这类似于this question，但我想要几列按一定顺序堆叠：

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

这将显示以下内容：

移动屏幕

B
--
A
--
C

桌面屏幕

A | B
--|
C |

但这就是我想要的：

移动屏幕

B
--
A
--
C

桌面屏幕

A | B
  | --
  | C

有一点需要注意：所有的柱子都有不同的高度，所以堆叠需要非常紧密（彼此下方的空间非常小）。这意味着我不能将 A 和 B 放在自己的行上，因为最大的列会将所有内容向下推，从而在堆栈之间创建一堆空白空间。

如何做到这一点？理想情况下，解决方案应该足够灵活，还允许在 C 或 A 下方堆叠更多列。

Answer 1

我相信您正在寻找的是偏移量。

你可以这样设置你的列，使用类似的东西：

<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-6">C</div>
</div>

偏移量将其推到网格的后半部分，但会在移动设备上适当地堆叠它们。