在小屏幕中间出现侧栏

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 第三个

有关 flexbox 的更多信息，请访问 -https://css-tricks.com/snippets/css/a-guide-to-flexbox/