Animate bootstrap columns

This could be done with CSS3 transitions, which would be consistent with the way Bootstrap JS plugins accomplish their animations.

HTML

<div class="container">  <div class="row">    <div id="col2" class="span0"></div>    <div id="col1" class="span12">      <a id="trig" class="btn btn-inverse">Reflow Me</a>    </div>  </div></div>​

JS

$('#trig').on('click', function () {  $('#col1').toggleClass('span12 span3');  $('#col2').toggleClass('span0 span9');});​

CSS

.row div {    -webkit-transition: width 0.3s ease, margin 0.3s ease;    -moz-transition: width 0.3s ease, margin 0.3s ease;    -o-transition: width 0.3s ease, margin 0.3s ease;    transition: width 0.3s ease, margin 0.3s ease;}.span0 {    width: 0;    margin-left: 0;}

JSFiddle

JSFiddle (Fluid)

_{Note: The animation is a still a bit imprecise, but I figure that can all be worked out separately. This answer provides the basic outline of how to go about it.}

This one is built on top of the responsive fiddle:http://fiddle.jshell.net/274NN/74/

It is type of an edit flow e.g. suppose you want to show a sliding menu on click of a button:

1) Slide left column out of the window2) Bring menu sliding from the right

Menu width is given in %, you can change it as per your needs