如何使用CSS移动小部件？

Question

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

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

如果您在PC上查看此页面，则会在右侧看到预订小部件，但是当您将其切换到移动设备上时，预订小部件将移至底部。 我想要const arrayData = [ form_id: 1, countTotal: 100, formName: 'Application Form', questions: [ 0: [ questionName: 'what is your name ?', note: 'give firstname middlename and lastname also..', required: true, answer: 'my name is John dao', sequence: 0, questionType: 'long text', options: [], ] 1: [ questionName: 'select your gender ?', note: '', required: true, answer: 'Male', sequence: 1, questionType: 'Single Selector', options: [ 0: { option_id: 1, value: 'Male', sequence: 0, is_selected: true, }, 1: { option_id: 2, value: 'female', sequence: 1, is_selected: false, }, 2: { option_id: 3, value: 'Other', sequence: 2, is_selected: false, }, ], ] ] ] 下的预订小部件。

我是通过移动html代码来完成此操作的，但不适用于CSS，当我切换回PC视图时，它看起来是错误的。

请帮助一个女孩！

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>

希望这会有所帮助。

Answer 2

您需要在移动版本中使用类display:flex向元素添加样式flex-direction: column-reverse和.twocolumns。它应该对您有帮助。

@media screen and (max-width: 991px) {
  .twocolumns {
    padding-right: 0;
    display: flex;
    flex-direction: column-reverse;
  }
}