使用 3 个浮动 div 调整响应式布局的顺序

Question

我正在尝试创建一个 3 网格响应式布局，如附图所示。在全尺寸屏幕上，div 应该看起来像左边的那个，当按比例缩小时，右边的那个。

一旦页面足够小，我可以使用 "float:left" 轻松地将 div B 向下移动到 div C 下方，它自然会下降到 div C 下方。

所以我面临的问题是如何真正让 div C 低于 B 而 B 像右图一样进入 A 和 C 之间？

• 我需要按 A、B、C 的顺序编码的 div
• A 的高度是固定的
• B 的高度是可变的
• C 的高度是可变的

我被困在这个阶段：https://jsfiddle.net/45x54w2g/ 我不知道如何将 C 向下移动到 div A 下方的左下角 - 不留空隙..任何帮助表示赞赏！谢谢！ 正文代码：

<div id="A" style="width: 40%; height: 300px;">
  A
</div>  

<div id="B" style="width: 55%; height: 600px;">
  B
</div>  


<div id="C" style="width: 40%">  
  C
</div>  

CSS：

div {
  min-width: 400px;
  float: left;
  background-color: gray;
  margin: 4px;
  text-align: center;
  height: 200px;  
}

Answer 1

我稍微编辑了标记，添加了一个容器，将 div B 移到顶部，并将其浮动到右侧。对于第二个结构，我使用了@media + flexbox。看下面的demo，运行sn-p点击“Full page”查看其他布局，或者使用jsfiddle demo。

https://jsfiddle.net/ydv01r9e/

.a, .b, .c {
  width: 50%;
}

.b {
  float: right;
}

@media (max-width: 700px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .a, .b, .c {
    width: auto;
  }
  .a {
    order: 1;
  }
  .b {
    order: 2;
  }
  .c {
    order: 3;
  }
}

.a {background: lime;}
.b {background: orange;}
.c {background: hotpink;}

<div class="container">
  <div class="b">b<br>b<br>b</div>
  <div class="a">a</div>
  <div class="c">c</div>
</div>