JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row" id="myContainer">
        
        <div id="box2" class="hide">
            New Content
        </div>    
        
        <div id="box1" class="span12">
            Initial Content<br/>
            <button class="btn" id="btn">Click Me</button>
        </div>
        
    </div>
</div>

CSS

div.container
{
    margin-top: 20px;
}

JavaScript

var state = false;
var box2 = $('#box2').detach();

$(function() {

    $('#btn').click(function() {

        if (state) {
            // go back to original
            $('#box1').switchClass('span3', 'span12', 1000);
            box2.switchClass('span9', 'hide', 1000).detach();

        } else {

            // go to next state
            // change big column to small right column
            $('#box1').switchClass('span12', 'span3', 1000);
            box2.switchClass('hide', 'span9', 1000).prependTo('#myContainer');
        }

        state = !state;

    });
});