Html 如何创建3个不同大小的盒子？

我正在尝试创建3个盒子，一个大盒子和两个小盒子。每个盒子里都有图像。问题是，这两个小盒子在任何设备上都没有响应，它在桌面上工作得很好。我真的迷路了，找不到我做错了什么，我从昨天开始就在做

.fashion\u look img{
宽度：100%；
显示：内联；
-webkit转换：不透明度0.5s，-webkit转换0.5s；
过渡：不透明度0.5s，变换0.5s；
}
.main container.block container.fashion\u look.content{
位置：绝对位置；
最高：5%；
左：0%；
宽度：100%；
文本对齐：居中；
填充：0 35px；
}
.主容器.块状容器{
显示：内联块；
宽度：100%；
浮动：左；
}
.main container.widget静态块{
显示：块；
溢出：隐藏；
填充顶部：60px；
}
.主容器。块状容器。横幅顶部，
.主容器。块状容器。新鞋，
.主容器.块状容器.时尚外观{
位置：相对位置；
溢出：隐藏；
}
.主容器.块容器.覆盖层{
底部：0；
高度：自动；
左：0；
保证金：0；
不透明度：0；
位置：绝对位置；
右：0；
排名：0；
过渡：所有0.2秒缓进缓出0.1秒；
-moz转换：所有0.2秒缓进输出0.1秒；
-webkit转换：所有0.2秒的输入输出均为0.1秒；
-o型转换：所有0.2秒缓进输出0.1秒；
宽度：自动；
z指数：2；
}
.主容器.块容器.新鞋.内容{
位置：绝对位置；
排名前10%；
左：0%；
宽度：60%；
文本对齐：居中；
填充：0 35px；
}

问题在于，当屏幕变小时，两个小框中的图像缩放不正确，不能放在同一行上

如果我添加此CSS，它将起作用：

img {
  width: 100%;
  height: auto;
}

看看这个。

只使用Bootstrap 4的实用程序 我不确定你希望手机的侧面部分显示在哪里，所以这里它显示在主要部分的下方。请注意，添加bg颜色只是为了明确每个部分的外观

body，html{
身高：100%；
}
.容器液体，
.容器流体。世界其他地区{
高度：100%；}

主栏
绝密
秘密

您想用这些框实现什么？它们是要排成一行，还是两个较小的盒子应该叠在一起，但放在较大的盒子旁边？@Jhecht谢谢你花时间回答我的问题，是的，我希望两个较小的盒子叠在一起，但是在更大的盒子旁边谢谢你史蒂夫：）但是我试过了，但是只有图像变小了，我想让它们像在更小的设备里一样相互覆盖。谢谢你，像你这样的人让世界变得美丽：）但是现在我唯一的问题是，如果我不把身体放进去，我的盒子非常小，在不知道元素在页面中的位置的情况下，如何解决这个问题很难说。真的，你需要让父容器+主行元素有一个你需要的高度。我希望它在我的页面中间。你能给我举个例子吗？你说的“在我的页面中间”是什么意思？在这个特定的部分上面有项目吗？这是一部巨无霸/英雄电影吗？在不了解更多布局的情况下，对我来说，这实际上是一个猜测游戏。@marie我非常愿意帮助你，但我确实需要一些澄清。