I currently have a main div that wraps around an image, a title, a quote, and some content. Each of these are in their own divs. I did this as I can't have the individual words separate as the page is scaled (my page scales depending on the device to make it responsive and I'd like the design to stay the same/similar).

The issue I'm having is with the content - I'd like to get it to wrap around my image and then at a certain point when the window is re-sized, have it follow the title and quote underneath the image. Right now, it stays in it's location, re-sizing the width, and then wraps around the title and quote when they move below the image upon the window re-size.

This is my html:

<div id = "teampage">

<div id = "pic">
picture etc.
</div>

<div id = "title">
title info
</div>

<div id = "content">
content info
</div>
</div>

css:

#teampage {
width: 100%;
position:relative;
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
border-radius: 6px;
border-bottom: 1px solid #414141;
margin-bottom: 80px;
color: #666666;
text-align:justify;
}

#pic {
float:left;
margin-right:1em;
vertical-align:text-top;
width:223px;
}

#title {
float:left;
width:27em;
}

#quote {
width:27em;
float:left;
display:inline;
}

#content {
width:100%;
min-width:27em;
}

As you can see I've been trying the "min-width" but it doesn't seem to really work to what I'm trying to get it to do. I've also tried a "float:left" and that puts my content under the image at all times... Any ideas?

Thanks very much