浮动右div在左div上进行媒体查询

Question

所以我正在用Skeleton开发一个网站。该网站应该在桌面上有以下布局：

当我调整浏览器大小或在移动设备上打开它时，div会以这种方式获取位置：

我想让左边的div在右边的div下面。所以文本首先出现然后是图片。 （仅限移动版）。

以下代码包含以下部分：

{{1}}

如何使用CSS以正确的方式配置？

Answer 1

由于您尚未为css代码添加html，因此您可以通过two example完成上述操作，即更改div position at small screen。

解决方案 - 1 - 通过设置position relative to child divs和mobile，即使用媒体查询更改位置small screen resolution。

#container{
  width:100%;
  height:auto;
}
#container > .box{
  width:50%;
  height:100px;
  background:#f2c;
  float:left;
  position:relative;
}
#container > .box1{
  width:50%;
  height:100px;
  background:#ff2;
  float:left;
  position:relative;
}
@media screen and (max-width:480px){
#container > .box{
    width:100%;
    top:100px;
  }
#container > .box1{
    width:100%;
    top:-100px;
  }
}

<div id="container">
<div class="box">1</div>
<div class="box1">2</div>
</div>

选中此jsFiddle并调整输出大小以查看更改。

解决方案 - 2 使用css3 flex，

#container{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  width:100%;
  height:300px;
}
#container > .box{
  flex:1;
  background:#ff2;
}
#container > .box1{
  flex:1;
  background:#f22;
}
@media screen and (max-width:480px){
  #container{
  flex-direction:column-reverse;
  width:100%;
  height:300px;
}
}

<div id="container">
<div class="box">1</div>
<div class="box1">2</div>
</div>

选中此jsFiddle

你还没有添加css，所以这是可行的例子。

Answer 2

感谢@frnt让我走上了正确的道路。事实证明，解决方案非常简单。我把它添加到我的CSS中，它开箱即用：

@media (max-width: 750px) {
#container {
display: flex;
display: -webkit-flex;
flex-direction: column-reverse;
  }
}