响应式布局中的 CSS 三个 div(A + B 停留，C 移动？)

Question

这是我的问题。我有一张包含三个 div 的 Bootstrap v4 卡。

A 是最重要的一个，我希望它保持在左上角。
当页面较宽时，我希望 B 和 C 在 A 的右侧。

当页面变窄时，卡片缩小，C 需要移动到 A 下方。但是 B 根本没有理由移动，我希望它留在原地。

请问我该怎么做？

Answer 1

不要将 B 和 C 包裹在容器中，因为这看起来像是 float 的经典情况:

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

CSS

div { 
  float: left;
  border: 1px solid red;
}
.a { width: 400px; height: 400px}
.b { width: 400px; height: 200px}
.c { width: 500px; height: 100px}

Codepen

我错过了什么吗？