Bootstrap 3: img-responsive not working with pull-right - css

Question

Why the img-responsive combined to pull-right does not scale properly on mobile devices?
I have the following code:
<div class="row">
<div class="container">
<div class="pull-right">
<a class="fancybox thumbnail" rel="features" href="test_image_small.jpg">
<img class="img-responsive" src="test-image.jpg"})">
</a>
</div>
<h2>Key Features</h2>
<br />
<ul>
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
<li>Feature D</li>
</ul>
</div>
</div>
I've already checked this question but it doesn't help in my case.
Here is the live sample: http://www.bootply.com/zbY6BrDbWI
Thanks.

Answer 1

Not sure I can directly help, I've always hated using the pull-left/right classes for this very reason. I tend to just stick with using Bootstraps Grid System and ordering the elements properly. For example;
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Key Features</h2>
<br>
<ul>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
</ul>
</div>
<div class="col-sm-8">
<a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
<img class="img-responsive" src="http://placehold.it/800x600.jpg">
</a>
</div>
</div>
</div><!-- /.container -->
(Note I've removed the nav HTML and cleaned up the code a bit)
If you absolutely needed them in the order you specified (in order to force the image to be the at the top on mobile for example) you could always apply the pull-right to the grid, like this
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12 pull-right">
<a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
<img class="img-responsive" src="http://placehold.it/800x600.jpg">
</a>
</div>
<div class="col-sm-4">
<h2>Key Features</h2>
<br>
<ul>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
<li>Feature A</li>
</ul>
</div>
</div>
</div><!-- /.container -->
Notice on this one how I also applied the col-xs-12 class. This forces it into knowing it's width and fitting the image into the parent container.
DEMO JSFiddle 1
DEMO JSFiddle 2
Hope this helps.