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

Question

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

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

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

我该怎么办呢？

Answer 1

不要包装B＆amp; C在容器中，因为这看起来像浮点数的经典案例：

<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

我错过了什么吗？