<code>
<div class="row">
    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">  
        <img class="img-responsive" src="layouts/layouts.PNG" />    <!--Mobile-->
    </div>
    <div class="hidden-xs col-sm-12 hidden-md hidden-lg">
        <img class="img-responsive" src="layouts/05.png" />   <!--Tab-->
    </div>
    <div class="hidden-xs hidden-sm col-md-12 hidden-lg">
        <img class="img-responsive" src="layouts/06.png" />   <!--Desktop-->
    </div>
    <div class="hidden-xs hidden-sm hidden-md col-lg-12">
        <img class="img-responsive" src="layouts/Layout_100.png" />  <!--Large-->
    </div>
</div>
</code>

Also see this article [[https://www.smashingmagazine.com/2013/05/how-to-avoid-duplicate-downloads-in-responsive-images/]]

or this.. from [[http://www.bootply.com/Y8XECJpGjS#]]\\
Create versions of your photos, and in this case the script looks for an img with "600x400" in the filename, and replaces it with "1200x800" when the screensize is bigger than 767px.\\
Javascript code
<code>
if ($(window).width() > 767) {
    $("img[src$='600x400']").each(function() {
        var new_src = $(this).attr("src").replace('600x400', '1200x800'); 
        $(this).attr("src", new_src); 
    });
}
</code>

HTML code
<code>
<div class="thumbnail">
  <img src="//placehold.it/600x400">
</div>
</code>
