Grid toggle Bootstrap columns

toggle-grid.html

<!-- The grid links, change the grid column sizes 
with the below addition. Style as required  -->

<ul class="list-inline grid-toggle">
	<li><h5>GRID:</h5></li> 
	<li><a class="six" href="#">6</a></li>
	<li><a class="four" href="#">4</a></li>
	<li><a class="three" href="#">3</a></li>
	<li><a class="two" href="#">2</a></li>
</ul>


<!-- Example HTML listing for the product/images in the grid
It's important you use img-responsive class -->

<ul class="list-products row"> 
  <li class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <img src="image-here.jpg" class="img-responsive">
  </li>
  <li class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <img src="image-here.jpg" class="img-responsive">
  </li>
  <li class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <img src="image-here.jpg" class="img-responsive">
  </li>
  <li class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <img src="image-here.jpg" class="img-responsive">
  </li>
</ul>  

toggle-grid.js

// Grid Toggle
// Lets say you are using bootstrap grid and listing products/photos. 
// You want to change between column sizes. 

$('.grid-toggle a').click(function(event) {
    $('.list-products li').removeClass('col-md-3 col-lg-3 col-md-2 col-lg-2 col-md-3 col-lg-3 col-md-4 col-lg-4 col-md-6 col-lg-6');

    if ($(this).hasClass('six')) {
      $('.list-products li').addClass('col-md-2 col-lg-2');
    }

    if ($(this).hasClass('four')) {
      $('.list-products li').addClass('col-md-3 col-lg-3');
    }

    if ($(this).hasClass('three')) {
      $('.list-products li').addClass('col-md-4 col-lg-4');
    }
    if ($(this).hasClass('two')) { //for less products
      $('.list-products li').addClass('col-md-6 col-lg-6');
    }

    return false;
});

toggle-grid.scss

// Example list for products or images

.list-products {
  padding:0;
  margin:0;
  list-style: none;

  li { 
    padding:0 10px 10px;
    display: inline-block;
  }
}