html - 移动端改变2个div的 float

Question

我的网站上有两个主要的 div，一个左边，一个右边。

左边的有这些类:col-md-3 left_side右边的:col-md-9 right_side

在 CSS 文件中，left_side 和 right_side 类只有一些填充，没有 float 。 float 来自 col-md Bootstrap 类。

如果我在移动设备或平板电脑上查看网站，如何将这些更改为 div 序列？ right_side div 将是第一个。

我想要这个，因为现在在移动设备上，left_side div 是第一个，我必须向下滚动很多才能查看实际页面内容或我选择的产品页面。

更新:使用这段代码，我仍然遇到同样的问题。

 @media (max-width: 575px) {
.left_side {
    float: right;
}
.right_side {
    float: left;
}
}
 @media (min-width: 576px) and (max-width: 767px) {
.left_side {
    float: right;
}
.right_side {
    float: left;
}
}
 @media (min-width: 768px) and (max-width: 991px) {
.left_side {
    float: right;
}
.right_side {
    float: left;
}
}

Answer 1

这是针对此问题的简单解决方案:
编辑:更改 css
Edit2 在 css 媒体查询中使用 max-width 而不是 min-width

.left_side {
  background-color: red;
}
.right_side {
  float: right !important;
  background-color: blue;
}
@media (max-width: 992px) {
  .right_side {
      float: none !important;
  }
}

<div class="col-md-9 right_side">Right in desktop, top in mobile</div>
<div class="col-md-3 left_side">left in desktop, bottom in mobile</div>