title: Creating a shopping cart page for multiple devices with Bootstrap 3.0
body: <p>First off, thanks again for your help.</p>
  
  <p>I like your response and it is what I was looking for up until the xs display. I'm trying to recreate somewhat the style of Amazon's shopping cart on smartphones.</p>
  
  <p>I kept working at it and started with the mobile (xs) version and manage my way up but I still added a certain code twice. Didn't care much for that although I will hide all duplicate code from the widths in which I don't need it. I'm also going to remove it completely by using mobile detect from the corresponding device.</p>
  
  <p>Here is what I ended up with:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="row show-grid"&gt;
          &lt;div class="col-md-9 col-sm-12 col-xs-12"&gt;
  
              &lt;div class="col-xs-12 visible-xs text-center"&gt;Subtotal (2 items): $636.80&lt;/div&gt;
              &lt;div class="col-xs-12 visible-xs"&gt;&lt;button type="button" class="btn btn-default btn-lg btn-block"&gt;Proceed to Checkout&lt;/button&gt;&lt;/div&gt;
  
              &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-9"&gt;Items to buy now&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"&gt;Unit&lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1 col-sm-1 hidden-xs"&gt;Qty&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"&gt;Total&lt;/div&gt;
  
              &lt;div class="clearfix visible-sm visible-xs"&gt;&lt;/div&gt;
  
              &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"&gt;&lt;img src="http://dummyimage.com/62x80/000/fff.png" alt="Item 1"&gt;&lt;/div&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-6"&gt;Luxurious Leather Moto Jacket&lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1 col-sm-1 col-sm-push-2 col-xs-3"&gt;&lt;input type="number" value="2"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 col-sm-pull-1 hidden-xs"&gt;$318.40&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"&gt;$638.40&lt;/div&gt;
  
              &lt;div class="col-xs-6 visible-xs"&gt;$318.40&lt;/div&gt;
              &lt;div class="col-xs-3 visible-xs"&gt;&lt;button type="button" class="btn btn-link btn-xs"&gt;Update&lt;/button&gt;&lt;/div&gt;
  
              &lt;div class="clearfix visible-xs"&gt;&lt;/div&gt;
  
              &lt;div class="col-xs-3 visible-xs"&gt;&lt;/div&gt;
              &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-9"&gt;&lt;ul&gt;&lt;li&gt;You save: $79.60 ( 20%)&lt;/li&gt;&lt;li&gt;In Stock&lt;/li&gt;&lt;li&gt;Eligible for FREE Super Saver Shipping&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  
              &lt;div class="col-xs-3 visible-xs"&gt;&lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1 col-sm-1 visible-sm col-xs-2"&gt;&lt;button type="button" class="btn btn-link btn-xs"&gt;Update&lt;/button&gt;&lt;/div&gt;
              &lt;div class="clearfix visible-sm"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 col-sm-offset-2 col-xs-2"&gt;&lt;button type="button" class="btn btn-link btn-xs"&gt;Delete&lt;/button&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"&gt;&lt;button type="button" class="btn btn-link btn-xs"&gt;Save for Later&lt;/button&gt;&lt;/div&gt;
              &lt;!-- eof ITEM 1 --&gt;
  
              &lt;div class="clearfix visible-xs"&gt;&lt;/div&gt;
  
              &lt;div class="col-xs-6 visible-xs"&gt;&lt;/div&gt;
              &lt;div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-6 col-xs-6 text-right"&gt;Subtotal: $318.40&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="clearfix visible-sm visible-xs"&gt;&lt;/div&gt;
  
  
          &lt;div class="col-md-3 col-sm-12 col-xs-12"&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-6 col-xs-6 hidden-xs pull-right"&gt;&lt;button type="button" class="btn btn-default btn-lg btn-block"&gt;Checkout&lt;/button&gt;&lt;/div&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-6 col-xs-6"&gt;&lt;button type="button" class="btn btn-link btn-xs"&gt;Continue Shopping&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>