宽度较小时，左浮动div之后右浮动div

Question

Example: http://jsfiddle.net/tkKth/

When I'm resizing my window (set .container {width:200px;} ), the left div appears after the right div. Is there a way to do this with css, when the divs left/right change their position in the html doc? -> <div class="left">Left div</div> <div class="right">Right div</div>

Thanks

Answer 1

6on your example http://jsfiddle.net/tkKth/ the right div is before the left

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

on your question it's the other way around

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

if the .container width is <= .left width & .right width, first in first served

if the left height is fixed (for the example 36px), you can use media queries with min-device-width: if the screen is below 600px, and add this for .right

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

Answer 2

Some years later, flexbox is well supported, so this can be achieved with:

.container { 
    display: flex; 
}

.left {
    order: 2;
}

.right {
    order: 1;
}