Html 以一定的模式排列不同大小的div

我想创建一个像这样的布局，重点放在“邮箱”上。 正如你所见，有三种不同的类型——大的、中的和小的。
我要创建的规则是：

1.“大”占宽度的100%。
2.“中等”约占宽度的60%，始终显示在左侧
3.“小”约占宽度的40%（考虑到边距），始终显示在左侧
4.）如果屏幕大小低于阈值（例如800px）或在移动设备上，则所有3个屏幕都应显示为100%且彼此低于。

这就是我目前得到的

.container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.货柜组{
填充：20px；
边框：1px纯黑；
利润率：10px；
}
.大、.中、.小{
盒影：1px12x12px黑色；
}
.大{
宽度：100%；
}
.中等{
最小宽度：60%；
弹性：110
}
.小{
弹性：110；
最小宽度：20%；
}

第一组
第2组
第3组
第2组
第3组

如果你在创建下一个小容器之前创建了三个中型容器，它们是否都应该排在左边？@Håkan：是的，这是计划，至少如果你不在移动设备上。因此，也许最好创建两个容器，一个右一个左，并添加带有

flex direction:column

@Håkan true的框，这可能会奏效，但是当我想添加一个“大”div时会发生什么呢？也许这不是我的设计草图清楚，但我也想让一个“大”div在该区域的中部或末端。事实上，应该可以在任何地方添加这3种div类型中的任何一种，而结构应该保持不变。除了“右”和“左”div之外，还可以添加“大”div。就像现在一样。如果你没有相同数量的“右”和“左”div，“大”div总是会分开一点，如果你在创建下一个小div之前创建了三个中div，它们是否都应该排在左边？@Håkan：是的，这是计划，至少如果你不在移动设备上。所以也许最好创建两个容器，一个右一个左，并添加带有

flex-direction:column

@Håkan true的框，这可能会起作用，但是当我想添加一个“大”div时会发生什么？也许这不是我的设计草图清楚，但我也想让一个“大”div在该区域的中部或末端。事实上，应该可以在任何地方添加这3种div类型中的任何一种，而结构应该保持不变。除了“右”和“左”div之外，还可以添加“大”div。就像现在一样。如果没有相同数量的“右”和“左”div，“大”div总是会分开一些