css - 在断点处位于英雄图像下方的英雄图像顶部的内容框

所以我最近开始使用 Bootstrap（一般来说对 CSS 来说相对较新）。我正在尝试将预订表格放在英雄图片的顶部，然后当它调整为平板电脑或移动设备时，它会出现在英雄图片的下方。

我已经能够通过为每种类型的预订表单设置 2 个代码块来做到这一点，然后它们的可见性由 css 媒体查询触发。这似乎不是一个很好的解决方案，因为我正在重复代码。

另一种方法是让英雄图像成为它自己的没有子元素的 div，并分别让预订表单以绝对定位位于顶部，这再次通过 CSS 媒体查询更改为不同的样式。

我想在这里问是否有更好的解决方案，也许可以在 Bootstrap 中完成。

任何人都可以提供任何帮助将不胜感激！

标签： csstwitter-bootstrapmedia-queries