JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <body ng-app="gridView" ng-controller="gridViewController">
        <div id="sliderContainer">
            Rows : <input value="2" type="range" min="2" max="4" id="rowcount"  step="1" ng-model="rows"/>
            Columns : <input value="2" type="range" min="2" max="4" id="columncount" step="1" ng-model="columns"/>
        </div>
        <div>rows : {{rows}} columns : {{columns}}</div>
        <div class="container">
            <div class="row row0">
                <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || columns === 2 && 'col-lg-6' || ''}}"></div>
                <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || columns === 2 && 'col-lg-6' || ''}}"></div>
                <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || ''}}"></div>
                <div class="chart {{columns === 4 &&'col-lg-3' || ''}}"></div>
        </div>
        </body>

CSS

body {
                text-align: center;
            }
            #sliderContainer{
                margin: 0 auto;
                width: 300px;
                height: auto;
            }
            .chart{
                background-color: #0000ff;
                border: 5px solid white;
                height: 300px;

            }
            .hidden{
                display: gone:;
            }

JavaScript

(function(angular) {
    angular.module("gridView", [])
    .controller("gridViewController", ["$scope", "$window", "$http",
        function($scope, $window, $http) {
        	$scope.rows = 2;
        	$scope.columns = 2;
           	
        }
    ]);

})(window.angular);