如何使用媒体查询更改 html 容器位置答案

【问题标题】：How to change html container position with media queries如何使用媒体查询更改 html 容器位置
【发布时间】：2019-04-11 21:00:41
【问题描述】：

我有 2 个名为 box1 和 box2 的 div 类。

当我将屏幕尺寸更改为 600 像素或更小时，box1 和 box2 的宽度都为：100%，box1 位于顶部，box2 位于底部。有没有办法改变这些盒子的位置，让 box2 保持在顶部，而 box1 保持在底部，不改变 html 中的元素位置？

    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>this is the title</title>


<style type="text/css">


.box1{
    width:100px;
    height:100px;
    background:red;
    float:left;
}

.box2{
    width:100px;
    height:100px;
    background:blue;
    float:right;
}

.wrapper{
    max-width:500px;
}




@media screen and (max-width:600px){  /* for tablets */
    .box1{
        width:100%;
        float:right;
    }
    .box2{
        width:100%;
        float:right;
    }
}


</style>



</head>

<body>

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>

</div>

<script>


</script>

</body>

</html>

【问题讨论】：

标签： html css media-queries

【解决方案1】：

你可以在你的媒体查询中添加这个：

.wrapper {
  display: flex;
  flex-direction: column-reverse;
}

这会将它们放在彼此下方并颠倒 HTML 代码中给出的顺序。

.box1 {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  float: right;
}

.wrapper {
  max-width: 500px;
}

@media screen and (max-width:600px) {
  .wrapper {
    display: flex;
    flex-direction: column-reverse;
  }
  .box1 {
    width: 100%;
    float: right;
  }
  .box2 {
    width: 100%;
    float: right;
  }
}

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>

</div>

【讨论】：