如何在CSS的帮助下实现响应式网页的以下布局？

Question

我正在尝试使用引导程序4构建的页面之一实现以下布局。

第1节和第2节基本上是具有col-4 / col-8和col-5 / col-7布局的容器流体，并且具有背景图像或背景颜色。

在此之上，我必须放置一个带有一些文本和按钮的div，并且根据位置，左列或右列，内容必须限制在容器的大小内，即，左边距和右边距与容器设置的相同。这本质上也需要响应。

我尝试根据媒体查询来增加边距，这似乎是一个非常丑陋的解决方案。

如何以更有效的方式实现这一目标？

谢谢！