响应式布局，在另一个div内有两个div

Question

我有这种HTML结构。

<div class="container">
    <div class="A"></div>
    <div class="BandC">
        <div class="B"></div>
        <div class="C"></div>
    </div>
</div>

如果屏幕宽度大于或等于，我希望有以下布局，例如800px ......

...但是当宽度小于800px时我想要这个。

我在这里面临的挑战是B和C属于同一个div。我把B和C放在同一个div中，这样如果内容垂直溢出，滚动条将出现在B和C旁边。

这是我到目前为止所拥有的（jsFiddle）。我使用display:flexbox向右移动.BandC，但是B保持在C的顶部，因为它们在同一个div中。

如何在允许B和C位于同一个div中的同时实现此布局？或者这需要更改我的HTML？

Answer 1

我明白了。我使用position:absolute将C放出容器div。

jsFiddle