title: Bootstrap - How to make text wrap around an image on small devices?
body: <p>I'm just getting started with Bootstrap. Below is a snapshot of my page.</p>
  
  <p><img src="https://i.stack.imgur.com/Fa34B.png" alt="enter image description here"></p>
  
  <p>My CSS is</p>
  
  <pre><code>.snippet img{
  width: 150px;
  max-width: 100%;
  height:auto;
  
  
   }
  
  @media(max-width: 767px) {
  .snippet img{
  
      width:100px;
      float: right;
      max-width: 100px;
      height: auto;
      margin-left: 10px;
      margin-right: 10px;
      }
  }
  </code></pre>
  
  <p>And here is my HTML:</p>
  
  <pre><code>&lt;h2&gt;About the venue&lt;/h2&gt;
  &lt;div class="media-body snippet" &gt;
      &lt;a class="pull-right" href="venue.php"&gt;
              &lt;img  src="images/venue.jpg" alt="illustration"&gt;&lt;/a&gt;
      &lt;p&gt;this is the paragraph ... &lt;/p&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the image to be hanging like that on big screen. However, on small devices I would like to get the text to wrap around the image. How can I do that? </p>
  
  <p>Any help would be appreciated!</p>