How to change layout dynamically in Bootstrap?

Question

Let's say I have a grid with fluid layout. It has one component, a table, in a span12 div - using the entire screen.

When a row in this table is clicked, I want to change the layout. I want to change the table's div to span4 and create a new span8 column on the right to display details of the selected item.

How can I do this programmatically? Something as simple as:

$("#mydiv").removeClass("span12").addClass("span4")

... doesn't seem to work, I believe I need to somehow tell Bootstrap to re-process the entire layout. Is it possible at all?

Answer 1

What about this solution:

var $table = $('.table-container'), // table inside
    $side  = $('.side-container');  // hidden by default
$table.on('click', 'tr', function() {
   $table.removeClass('span8').addClass('span4');
   $side.show();
});

http://jsfiddle.net/meV43/

I used total width of span8 in this demo

With toggle column functionality http://jsfiddle.net/meV43/1/