如何在响应视图下将第二个div放在第一个div下？

Question

我有一个页面http://spitzpomeranian.com/fr/?option=com_rsform&view=rsform&formId=5

有2个div： - 左边一个显示iframe youtube， - 右边一个显示表格

在桌面视图上很好， 但当我缩小窗口以查看响应式视图时，右侧的表单不会出现在我的YouTube视频下，但它会落后！

任何CSS专家都可以解释我如何才能完成这项工作？

我搜索谷歌的解决方案并尝试了许多事情但没有成功。

提前致谢。

Answer 1

看起来您的页面已经在使用Twitter Bootstrap（我查看了页面的来源），但您没有利用Bootstrap的响应列布局。

您目前有以下两个元素：

 <div class="div_image_homepage_left"></div>
 <div class="div_image_homepage_right"></div>

我建议删除你已经拥有的当前css属性（即浮动，显示，位置等）并使用以下内容：

<div class="row">
     <div class="div_image_homepage_left col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
     <div class="div_image_homepage_right col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

这将使他们在大中型（12列中的6列）屏幕上占50％，在小型和超小屏幕尺寸上占12％（12列中的12列）。

Read more about Bootstrap grid system here

希望这有帮助。