使用3个浮动div调整响应式布局的订单

Question

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

我可以轻松地使用＆＃34; float：left＆＃34;向下移动div C下方的div B.一旦页面足够小，它将自然地降到div C以下。

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

• 我需要按照A的顺序编码的div，然后是B，最后是C
• 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。请参阅以下演示，运行代码段并单击＆＃34;完整页面＆＃34;查看其他布局，或使用jsfiddle演示。

https://jsfiddle.net/ydv01r9e/

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;