当宽度较小时右浮动div后左浮动div

Question

示例：http://jsfiddle.net/tkKth/

当我调整窗口大小（设置.container {width:200px;}）时，左侧div出现在右侧div之后。有没有办法用css做这个，当div左/右改变他们在html doc中的位置？ - ＆GT; <div class="left">Left div</div> <div class="right">Right div</div>

由于

Answer 1

6在您的示例http://jsfiddle.net/tkKth/中，右侧div位于左侧

之前

<div class="container">
<div class="right">Right div</div>
<div class="left">Left div
</div>​

关于你的问题，这是相反的方式

<div class="container">
<div class="left">Left div</div>
<div class="right">Right div</div>
</div>​

如果.container宽度是＆lt; = .left width＆amp; .right width，first first in first served

如果左侧高度是固定的（对于示例36px），您可以使用最小设备宽度的媒体查询：如果屏幕低于600px，则将此添加为.right

top:36px; /* equivalent to .left height*/
position:absolute;

Answer 2

几年后，flexbox得到了很好的支持，所以可以通过以下方式实现：

.container { 
    display: flex; 
}

.left {
    order: 2;
}

.right {
    order: 1;
}