Html 使堆叠div在另一个具有图像的div上响应的问题

所以我需要达到这个效果

顺便说一下，我正在使用引导

这是我的初始代码，但我不知道如何定位它，我已经尝试了一切，但它仍然没有响应窗口。我怎样才能做到最好，谢谢：）

有关更多信息。。。。
联系我们

虽然我无法得到您真正想要的东西，但如果我做对了，您希望自己的形象和内容处于中心位置，而不影响响应性设计。 如果这段代码可以帮助您，请查看它

---

Ye sorta，就像横幅顶部的图像在我的页面上延伸得很好，而且是有响应的，但我需要在图像顶部添加此框，如图所示，并使其也有响应：）。抱歉，只是想澄清一下，内容框需要位于图像的左侧，如图所示：）Ye，就是这样：），非常感谢

<div class="row" id="banner-top-row">
    <div class="col-md-12" id="banner-top-col">
        <img src="img/banner-top.png" id="banner-top" class="img-responsive"/>
        <div class="banner-information">
            <h4> For More Information.... </h4>
            <h1> Contact Us </h1>
        </div>
    </div>
</div>