html - 小宽度时右浮动div后左浮动div

Question

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

当我调整窗口大小（设置.container {width:200px;}）时，左 div 出现在右 div 之后。当 div 左/右改变它们在 html 文档中的位置时，有没有办法用 css 做到这一点？-> <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 宽度 <= .left 宽度 & .right 宽度，则先到先得

如果左侧高度是固定的（例如 36 像素），您可以使用带有 min-device-width 的媒体查询：如果屏幕低于 600 像素，并将其添加到 .right

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

Answer 2

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

.container { 
    display: flex; 
}

.left {
    order: 2;
}

.right {
    order: 1;
}