如何使第三个盒子在第二个盒子下移动使用CSS

Question

给定以下HTML和CSS，如果容器的宽度小于600px，我希望蓝色框在粉红色框下而不是红色框下移动。

JSFiddle

HTML

<div class="row" id="one"> 
    &nbsp; 
</div><div class="row" id="two"> 
    &nbsp; 
</div><div class="row" id="three"> 
    &nbsp; 
</div> 

CSS

#one{ 
    height: 200px; 
    background-color: red; 
} 
#two{ 
    height: 100px; 
    background-color: pink; 
} 
#three{ 
    height: 100px; 
    background-color: blue; 
} 
.row{ 
    display: inline-block; 
    width: 200px; 
    margin: 0px; 
    padding: 0px; 
} 

+1

然后，你需要'漂浮'左边的红色框... http://jsfiddle.net/s0hp7Lbh/1/ – CBroe

Answer 1

根据还有什么你在你的页面，但如果你简单地添加float: left;到红格。它会根据你的愿望坐在粉红色的div下。

然后添加600px以上的媒体查询以删除浮动。

@media(min-width: 600px) { 
    #one { float: none; } 
} 

希望能帮到你！

Answer 2

给浮动：左到红色块

#one { 
    float:left 
    height: 200px; 
    background-color: red; 
}