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

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

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

所以我面临的问题是，如何使div C位于B之下，而B位于A和C之间，如图右侧

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

我被困在这个阶段： 我不知道如何将C移到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>  

---

我稍微编辑了标记，添加了一个容器，将div B移到顶部，然后将其向右浮动。对于第二个结构，我使用了

@media

+

flexbox

。查看下面的演示，运行代码段并单击“完整页面”查看其他布局，或者使用JSFIDLE演示

.a、.b、.c{
宽度：50%；
}
.b{
浮动：对；
}
@介质（最大宽度：700px）{
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.a、.b、.c{
宽度：自动；
}
.a{
顺序：1；
}
.b{
顺序：2；
}
c{
顺序：3；
}
}
.a{背景：石灰；}
.b{背景：橙色；}
.c{背景：hotpink；}

b
b
b
A.
C

这可能会有所帮助：对于高度部分，在左图中如何？对于正确的图表，我想你希望3个方块的高度为容器的100%，对吗？是的！！！！！！！！！如果flexbox是一个选项，那么有一个order属性可以让您定义您的订单divs@Pangloss对于左图，A和C上的高度基本上是固定的，但是-B是一个变量，取决于有多少文本，这是可行的！但是有没有办法让div'b'向左浮动而不是向右浮动，并且仍然使整个布局工作？除非您向div a和C添加一个容器，但是flexbox部分会出现问题。顺便问一下，为什么你需要左浮动？我对浮动的使用非常糟糕：右-我试图将div“b”定位到“a”和“c”的右侧，右侧有大约30px的填充，所以这会使事情变得复杂一些。我尝试了右填充：div“b”上有10%-但这显然会在总体布局上造成一些问题（例如b向下刷新“a”）或者，有没有办法使“a”和“c”的宽度固定为460px？而不是使用百分比值？因为如果您需要一些

填充

，我只需要“b”来响应，所以还要添加

框大小：边框框在一起。
div {
  min-width: 400px;
  float: left;
  background-color: gray;
  margin: 4px;
  text-align: center;
  height: 200px;  
}