响应式文本环绕图像

Question

我需要文本环绕图像（200 像素 x 200 像素），直到侧面的部分环绕文本变得太窄，此时我希望文本框位于图像下方。

这就是我的意思：

when the screen is wide

when the screen is more narrow
这是我希望包装停止的地方。我不希望文本以这样的方式换行：

洛伦
伊普萨姆
是
简单
假人
正文
的
印刷
等等等等 Lorem Ipsum 只是打印的虚拟文本和

请帮帮我:(

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>