Responsive text wrap around an image

Question

I need text to wrap around an image (200px by 200px) until a portion of the wrapped text on the side gets too narrow, at which point i want the text box to go under the image.

This is what i mean:

when the screen is wide

when the screen is more narrow
This is where i want the wrapping to stop. I dont want the text to wrap in a way that it displays skinny stacks of text like this:

Lorem
Ipsum
is
simply
dummy
text
of the
printing
and blah blah Lorem Ipsum is simply dummy text of the printing and

Please help me :(

Answer 1

article { 
  margin: 20px; 
  font-family: verdana, sans serif;
  font-size: 16px;
}
p { 
  margin-top: 20px; 
}
.example-container {
  clear: both;
  margin-top: 40px;
}
.caption {
  font-style: italic;
  color: BlueViolet;
  margin-top: 40px;
}
.caption-subhead {
  font-style: normal;
  font-weight: bold;
}
.image-example {
  float: left;
  background-color: #555555;
  width: 300px;
  height: 80px;
  text-align:center;
  color: #FFFFFF;
  padding-top: 60px;
  margin: 5px 20px 10px 0;
}
.hyphenate {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<article lang="en">
  

<div class="example-container">
  
    <div class="image-example">Image Example</div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

   
</article>