在移动设备上更改 2 div 的浮动

Question

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

左边有这些类：col-md-3 left_side 以及正确的：col-md-9 right_side

在 CSS 文件中，left_side 和 right_side 类只有一些填充，没有浮动。浮动来自 col-md 引导类。

如果我在手机或平板电脑上查看网站，如何将这些更改为 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>