将右div浮动在左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 ，因此这里有two example ，您可以通过上述two example实现上述目标，即div position at small screen更改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;
  }
}