Html Bootstrap 4马赛克布局

我真的很难实现马赛克风格的布局。我尝试过使用Bootstrap4的网格系统、flex和其他各种方法，但我似乎不知道如何实现一个在所有设备上都能很好工作的解决方案

我已经附上了布局的图像，中间的两个框是文本内容，其余的是图像，所有这些都需要在所有设备上播放

非常感谢您的帮助

请尝试此代码

.item1{
网格区域：区域1；
}
.项目4{
高度：100px；
}
.项目5{
网格区域：区域5；
}
.网格容器{
显示：网格；
网格模板区域：
“区域1…”
“区域1区域4区域5”
“区域1.区域5”
“…区域5”；
网格间距：2px；
}
.grid容器>div{
背景色：#323232；
文本对齐：居中；
填充：40px；
}

您是否尝试过引导

.card columns

？(). 我过去曾使用bootstrap 4将此解决方案用于马赛克布局。

这是否回答了您的问题？本文展示了一些涉及多列布局和Flexbox的方法。看一看: