根据屏幕大小堆叠bootstrap中的列？

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>

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