Float div on right, then drop below on narrow screen

Question

I'm trying to achieve the effect illustrated below:

on my site (http://new.freshsourdoughexpress.com/contact/), but I can't think of the correct HTML and CSS to get it to work. The only way I can get the map to float up on the right is to put the iframe before the text div, but then I can't have the map drop below the text when I shrink the width. I'm out of ideas currently so I'm hoping someone else can point out the obvious. Thanks!

EDIT - Sorry, I posted this as I was running out the door and didn't post enough info. I currently do have a responsive layout (WP Twenty Thirteen theme). If I set the text div to float: left and the map iframe to float: right the text div occupies 100% of the width and the map drops below. I'm trying not to set a width on the text div because I want it to be able to resize with the window. (I'm trying to keep the dimensions of the map the same and have the text resize to fit. Using a percentage width on the text would require me to do the same with the map, which I'm trying not to do.)

If I put the iframe first in my HTML then the map will stay up at the top (the first three frames of the GIF) without setting a width (either in px or %), but then I can't have the map drop below the text. To achieve the last frame I had to move the iframe back below the text.

So I'm wondering if it's at all possible to get what I'm after without defining a width for the text div. If there isn't I suppose I can live with the map resizing. I was trying to do it without it though.

Answer 1

use @media queries, something like this

.rightcol { float: right; }
@media (max-width: 600px) {
   .rightcol { float: none; }
}

this will set the .rightcol on all devices with screen size 600px or lower float: none and keep it float: right for the rest. You can of course change the 600px to whatever number you please.

Answer 2

JSFIDDLE

for the left block use

float:left;
width:50%;

because it is currently width:100% automatically, you need to separate content as 50% 50%

then for the container block you must clear the float by

 display:inline-block;