JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<!-- Toggle Button -->
<!-- // -->
<div class="grid-toggle">
  <a class="two" href="#">6 COL</a>
  <a class="three" style="display:none;" href="#">4 COL</a>
</div>
<hr>
    
<!-- List Products -->
<!-- // -->
<ul class="row list-products">
  <li class="col-xs-6 col-sm-4">
    ONE
  </li>
  <li class="col-xs-6 col-sm-4">
    TWO
  </li> 
  <li class="col-xs-6 col-sm-4">
    THREE
  </li>
  <li class="col-xs-6 col-sm-4">
    FOUR
  </li>
  <li class="col-xs-6 col-sm-4">
    FIVE
  </li> 
  <li class="col-xs-6 col-sm-4">
    SIX
  </li>
</ul>

JavaScript

// toggle click
//

$(".two, .three").click(function()
{                     
   $(".two, .three").toggle();
});

// Switch class and grid
//

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

    if ($(this).hasClass('three')) {
        $('.list-products li').addClass('col-xs-4 col-sm-4');
        $.cookie("pref", '4X4');
    }
    if ($(this).hasClass('two')) { //for less products
        $('.list-products li').addClass('col-xs-6 col-sm-6');
        $.cookie("pref", '6X6');
    }
    return false;
});