Html 我们能把两个div并排浮动，把第三个div放在它们下面吗？

我想根据屏幕宽度安排3个div，如下所示：

对于<500px的

屏幕宽度，排列应如下所示：


对于大于500px的
屏幕宽度
排列应如下所示：

500px“>

我曾尝试在大于500px的屏幕大小中实现这一点，但我不知道如何使用相同的代码来实现以下安排：
这可以通过css实现

如果您对网格解决方案持开放态度，则需要稍微更改html结构。使用
flex
这是不可能的

解决方案：
下面是我要做的：


.container{
显示：网格；
网格模板列：50%50%；
网格模板行：200px 200px；
网格间距：0；
}
女主角{
背景颜色：浅绿色；
}
.迪夫{
背景颜色：浅蓝色；
}
.分区{
格构柱：1/2跨；
背景颜色：黄色；
}
@媒体屏幕和屏幕（最小宽度：500px）{
女主角{
网格柱：2/1；
网格行：2/2
}
.迪夫{
网格柱：2/2；
网格行：1/1；
}
.分区{
网格柱：2/2；
网格行：2/2；
}
}

A.
B
C
编辑

在看到您的问题更新后，mediaquerie、
flex
、
order
，以及一个伪值来创建空白间隔，应该足够了。仍然是
.container
的每个3个直接子框

在全页模式下运行代码段并调整浏览器大小，在演示中断点设置为700px


*{
框大小：边框框；
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
女主角{
背景：浅绿色；
}
.迪夫{
背景：浅蓝色；
}
.分区{
背景：rgb（255,255,0）；
}
.container>div，
.货柜：在{
弹性：1；
最小宽度：40%；
填充：1em 0；
文本对齐：居中；
}
@介质（最小宽度：700px）{
/*upadte这里是你将要发生的px值。500px*/
女主角
.分区{
顺序：1；
弹性：01 40%；
}
.货柜部，
.货柜部{
弹性：01.60%；
}
.货柜：在{
内容：“；
弹性：01 40%；
}
}

A.
B
C
如果您删除了容器2 div，它将possible@Pete对于>500px的排列，它工作正常，应该做些什么来获得更新的图像？您可以检查上传的更新图像（对于>500px）并告诉我是否可以使用网格布局完成吗？回答更新，如果它现在满足您的要求，请接受：）