How to swap grid layout on device width (responsive design) using Bootstrap?

Question

I recently started developing with bootstrap, but I am struggling with something that perhaps is pretty basic.

I am developing an online shop, and on our main page we are going to display 8 different product types. Using the grid system i set the products up like this:

Grid view

The way I understood it, I have 12 grid spots in width, so I did 4x3. I then nested the information I wanted in each product box (using .row-fluid) So each product box got a 12, 6 6 grid.

However, when I change the browser width to mobile, I only want 1 product for each row (which I already have), and I want a different nested-grid layout.

mobile grid view

How can I have two different nested layouts, depending on screen width? Right now, it switches to 1 row per product, but keep the 12, 6 6 grid, that looks terrible when there is only 1 row

Answer 1

You want to take advantage of bootstraps predefined column classes which target different screen sizes, where you could do something like:

  <div class="row">
  <div class="col-xs-9 col-sm-6 col-lg-6">product name</div>     
  <div class="col-xs-9 col-sm-6 col-lg-6">description</div>
  <div class="col-xs-3 col-sm-12 col-lg-12">image</div>
  </div>

In the above you will deciding your product grid layout by defining the col-xs-* and col-sm-* columns in all likelihood. Play around with it a bit and make it work for your own layout.

Also if you haven't already you are going to want to read up on media queries which will allow you to change your stylesheets based on screen size and you will also want to look into "push and pull techniques with bootstrap to help you reorder your columns if necessary.

It is always a good idea to try and develop for mobile first as you will be doing less backtracking and keeping your css code lighter. If you have more specific questions post them here because it is an excellent resource.