html - 如何用CSS移动小部件？

Question

我对此很陌生。在我的网站上，我一直在尝试修复它的移动版本。

https://glacieradventure.is/tour/vatnajokull-glacier-walk/

如果您在 PC 上查看此页面，您会在右侧看到预订小部件，但当您将其切换到移动设备 View 时，预订小部件会转到底部。我想要 <h2> 下的预订小部件.

我通过移动 html 代码做到了这一点，但它不适用于 css，当我切换回 PC View 时它看起来不对。

请帮助一个女孩!

Answer 1

在h2标签之后，创建一个div元素
即

<div class="responsive-only">{Copy and past the booking widget code here}</div> 

//注意:所以预订小部件代码出现在两个地方。

<style>
.responsive-only {display: none;}
@media (max-width: 991px) {
.responsive-only {display: block;}
// Note: Then hide the another one widget (which appears in the bottom)
}
</style>

希望对您有所帮助。