Change order of floated divs with CSS

Question

JSFIDDLE

I want to change the order of floated divs at a certain pixel size.

At default state they both have 50% width and they are next to

Answer 1

Try to change your

HTML to this -

and your @media query CSS to this -

@media screen and (max-width:600px) {
.container{
    display:flex;
    flex-direction: column-reverse;
}
.yellow {
    background: yellow;
    width: 100%;
    height: 300px;

}

.red {
    background: red;
    width: 100%;
    height: 300px;


} }