Re-order divs for responsive design

Question

I am working on a responsive design and I would like to re-order some divs at certain breakpoints. I am not sure if this is even possible, but here it goes.

Here is a rough fiddle showing the current layout: http://jsfiddle.net/Ubjmc/ above a certain breakpoint. As you can see the order (of the divs) go - one, two and then three.

And this is how I want it to look after my breakpoint: http://jsfiddle.net/AfT4D/ The order of the divs for this one is - one, three and then two.

I am not sure this is possible to do with straight css. What I have been doing so far is making a 4th element that hides above the breakpoint and shows after the breakpoint and then hiding the element it replaces at that breakpoint (hopefully that makes sense).

Is that method the only reliable css-only way of doing what I'd like (that isn't extremely convoluted)?

Edit - I already have my breakpoint set and am using media queries. The second fiddle in my example is how I want the first to look, in the order of the first (or I want to find out if that is possible).

<div class="wrap">
    <div class="one"></div>
     <div class="two"></div>
    <div class="three"></div>
</div>

The question is if I have my order like shown in the code above, if there any possible way to get it to look like this: http://jsfiddle.net/AfT4D/, without editing the order of the divs?

Answer 1

You have already a property in CSS called order, and it is available in flex display.

Set the container to

.wrap {
    display: flex;
    flex-wrap: wrap;
}

Then you can set the order 3 to two

.two {
    order: 3;
}

And that is it !

demo

Support isn't very high, but it is coming (Firefox should release flex-wrap support this month)