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>

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

1 个答案: