Question

我尝试使用twitter bootstrap网格创建一个布局，其中包含三个块A，B和C，当它们堆叠在小屏幕上时，它们按顺序出现。然而，在较大的屏幕上，中间的块B应该向右移动，A和C看起来堆叠在左边。

问题在于，块体具有未知的高度，事实上，由于可折叠，标签等，高度可能会动态变化。特别是当B高于A时，我会遇到麻烦。

小屏幕布局应该如下所示:(在图片B中，使用两个括号表示非常高的块。）。

[A]
[B]
[B]
[C]

在更宽的屏幕上，我希望它像这样呈现：

[A][B]
[C][B]

最直接的代码是：

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

但是布局在A和C之间存在一个丑陋的差距，因为C位于B的末尾。

[A][B]
   [B]
[C]

Answer 1

.row {
    display: flex;
    flex-wrap: wrap
}

将是一个解决方案，此外，如果您希望首先显示B，您可以为每个div定义订单样式，例如在较小的屏幕上

@media screen and (max-width: 768px) {
div.B { 
    order: 1
}
dic.A { 
    order: 2
}
div.C {
    order: 3
}
}

和B将是第一个A将是第二个和C第三个