<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>This is my Snipp</h2> <p>I need help.</p> <img class="visible-lg" src="http://i.imgur.com/J9cwCq9.jpg" alt="" title="File size= 750KB"> <img class="visible-md" src="http://i.imgur.com/Mjf7tWg.png?1" alt="" title="File size= 355KB"> <img class="visible-sm" src="http://i.imgur.com/5JLR7In.png?1" alt="" title="File size= 239KB"> <img class="visible-xs" src="http://i.imgur.com/flG6XZR.png?1" alt="" title="File size= 55KB"> </div> </div>

body{ background-color:black; color:#ccc; } img{ padding:30px }

/* * How to detect browser width * Ref: http://www.surfingsuccess.com/jquery/window-width.html#.Uw1RiV6Lfx4 */ $(window).ready(function() { var wi = $(window).width(); $("p.testp").text('Initial screen width is: ' + wi + 'px.'); $(window).resize(function() { var wi = $(window).width(); $("p.testp").text('Width is currently: ' + wi + 'px.'); }); });