html - 将右 div float 在左 div 上以进行媒体查询

Question

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

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

我想让左边的 div 放在右边的 div 下面。所以先是文字，然后是图片。 (仅限移动设备)。

以下代码构成该部分:

  <section class="about">
    <div class="container">
        <div class="row">
            <div class="one-third column">
                <img class="u-max-full-width" src="images/person.png" alt="Person" height="300" width="200">
            </div>
            <div class="two-thirds column">
                <h4>About</h4>
                <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
                    Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p>
            </div>
        </div>
    </div>
</section>

如何使用 CSS 正确配置它？

Answer 1

因为你还没有为你的html代码添加css，所以这里有两个例子，你可以通过它们实现上面的，即改变div 在小屏幕上的位置.

解决方案 - 1 - 通过设置 position relative to child div 和 mobile 即使用媒体查询改变 small 的位置屏幕分辨率。

#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，因此这是可行的示例。