title: .img-responsive breaks when used with .pull-right
body: <p>I've got some images that have <code>.pull-left</code> and <code>.pull-right</code> to align them in a specific pattern. I'm also using <code>.img-responsive</code>.</p>
  
  <p>The images look like this:</p>
  
  <pre><code>&lt;img src="~/Images/test-modern.jpg" class="pull-right img-responsive" /&gt;
  &lt;img src="~/Images/test-modern.jpg" class="pull-left img-responsive" /&gt;
  </code></pre>
  
  <p>It seems that for the images that have <code>.pull-right .img-responsive</code> does not work. However, it does work with <code>.pull-left</code>.</p>
  
  <p><code>.pull-right</code> uses <code>float:right</code> in the background and if I find that in the F12 tools and toggle it on and off I can see <code>.img-responsive</code> also turning on and off.</p>
  
  <p>What am I missing here?</p>