Have a fixed width right floated div drop below other content?

Have a fixed width right floated div drop below other content?

I have a two column layout, The left hand column is flexible in size, but
the right hand column has a fixed width. When you resize the browser, the
left hand column shrinks to allow the right hand one always to fit.
At a set size however, when the left column reaches a min width (as
dictated by the overall width of the window), we need to stack the columns
using a media query, so that they can be unfloated and fill the space
available to them.
The problem is that when this happens, the right hand column appears above
the left column due to the way the markup has to be written. I need the
right hand column (containing less important info) to be below the left
hand column on smaller screens.
Is it possible to have the right column naturally fall below the left one?
Either by achieving the size effect having it further along in the markup,
or through some pure CSS solution?
I don't want to have to resort to javascript to change the element order,
and if possible I don't really want to have to have duplicate divs with
the same content to hide/unhide, however I understand if that's the only
viable solution.
There's a demo fiddle here: http://jsfiddle.net/jmxu2/
<div class='column-contain'>
<div class='c-right'>
The right floated div is secondary content, but fixed width. It
should drop below the primary content when there isn't enough room.
</div>
<div class='c-left'>
This left div is primary content, but non fixed in size. When there
isn't enough room to nicely display side by side, this div should be
on top.
</div>
</div>