title: Float div on right, then drop below on narrow screen
body: <p>I'm trying to achieve the effect illustrated below:</p>
  
  <p><img src="https://i.stack.imgur.com/Ix4kT.gif" alt="enter image description here"></p>
  
  <p>on my site (<a href="http://new.freshsourdoughexpress.com/contact/" rel="noreferrer">http://new.freshsourdoughexpress.com/contact/</a>), 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!</p>
  
  <p><strong>EDIT -</strong> 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 <code>float: left</code> and the map iframe to <code>float: right</code> 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.)</p>
  
  <p>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.</p>
  
  <p>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.</p>