<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="col-xs-12"> <div class="panel panel-info"> <div class="panel-body"> <div class="row"> <div class="col-xs-3 col-md-3 col-sm-3 col-lg-3"><img class="img-responsive bottle1" src="http://dermasnail.com/images/30-day-supply.jpg"> <img class="img-responsive bottle2" src="http://dermasnail.com/images/90-days-supply.jpg"> </div> <div class="col-xs-9 col-md-7 col-sm-6 col-lg-6 " > <h4 class="product-name"><strong>DermaSnail: 30 Day Supply</strong></h4><h4><small>Start looking and feeling visibly younger with a 30-day supply of Dermasnail Advanced Anti-Aging Serum. Dermasnail is backed by a 100% Money Back Guarantee.</small></h4> </div> <div class="col-xs-10 col-md-2 col-sm-3 col-lg-3"> <div class="col-xs-6 col-sm-6"> <h6><strong>Quantity </strong> </h6> </div> <div class="col-xs-6 col-sm-6"> <input type="text" class="form-control input-sm" value="1" text="1"> </div> <div class="hidden-xs col-sm-2"> <button type="button" class="btn btn-link btn-xs"> <span class="glyphicon glyphicon-trash"> </span> </button> </div> </div> <div class="row text-center"> <div class="col-xs-9"> <h4 class="text-right">Total <strong>$50.00</strong></h4> </div> <div class="col-xs-3"> <button type="button" class="btn btn-success btn-block"> Checkout </button> </div> </div> </div> </div> <div class="panel-footer"> </div> </div> </div> </div> </div>

body { margin-top: 20px; } .xs-col-3 .bottle1{ display:none; } @media (max-width: 767px) { .bottle2{ min-height:200px; display:block; } .bottle1{ display:none; } } @media screen and (min-width: 768px) { .bottle2 { display: none; } .bottle1{ display: block; } }