Floating beyond markup order

by sambaldwin

HTML

<div id="one">
    First div
</div>
<div id="two">
    Second div
</div>
<div id="three">
    Third div
</div>

CSS

body {
    margin:0;  
    color:#333;
    background:#ffff87;
}

div {
    box-sizing:border-box;
    height:4em;
    padding:0.5em;
    font-family: "Helvetica Neue", sans-serif;
    font-weight:500;
}

#one {
    float:left;
    background:#aaaa87;
    width:15%;
}

#two {
    float:right;
    background:#dddd87;
    width:25%;
}

#three {
    float:left;
    background:#cccc87;
    width:60%;
}



@media only screen and (max-width: 500px) {
    #one {
        width:50%;
    }
    
    #two {
        float:left;
        width:50%;
    }
    
    #three {
        width:100%;
    }
}