Bootstrap 3 Resize Cols

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Jens Kühn

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <a href="#" id="left" class="btn btn-primary">
		  left
		</a>
      <a href="#" id="both" class="btn btn-primary">
		  both
		</a>
      <a href="#" id="right" class="btn btn-primary">
		  right
		</a>
    </div>
    <div class="row">
      <div class="col-sm-3" id="leftSide">
        test1
      </div>
      <div class="col-sm-9" id="rightSide">
        test2
      </div>
    </div>
  </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/* 
Adding a new column size to Bootstrap 3.0

.col-sm-0 used to set a width to 0px for animation.
setting margin, height, padding to 0 to avoid conflict
with other divs, etc. 
*/

.col-sm-0 {
  width: 0px;
  float: left;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  min-height: 1px;
}

div {
  -webkit-transition: all 500ms ease-in-out 0s;
  -moz-transition: all 500ms ease-in-out 0s;
  -o-transition: all 500ms ease-in-out 0s;
  transition: all 500ms ease-in-out 0s;
}

#leftSide{
  background : #f00;
}
#rightSide{
  background : #f0f;
}

JavaScript

$(document).ready(function() {

  $('#left').on('click', function(e) {
    e.preventDefault();
    $('#leftSide').removeClass().addClass('col-sm-12');
    $('#rightSide').removeClass().addClass('col-sm-0');
  });
  $('#both').on('click', function(e) {
    e.preventDefault();
    $('#leftSide').removeClass().addClass('col-sm-6');
    $('#rightSide').removeClass().addClass('col-sm-6');
  });
  $('#right').on('click', function(e) {
    e.preventDefault();
    $('#leftSide').removeClass().addClass('col-sm-0');
    $('#rightSide').removeClass().addClass('col-sm-12');
  });

});