Using toggleClass to resize Bootstrap columns

I have a webpage which has two main divs. One for a small 'control panel' on the left (takes up a quarter of the space), and a larger main table on the right (takes up three quarters of space). To accommodate different screen sizes, I've incorporates boostrap columns e.g.                 <div className="control-panel col-lg-3 col-md-3 col-sm-3 col-xs-3" id="control-panel">

This mostly works. If I dynamically resize the browser, this is as expected.

Moving on, I've created a toggle button whose click event hides this control panel div (and is expected to resize the main table from 9 columns to the full 12 columns).

Right now for the resizing of the main table, in the click function i just have:

 $('#theMainTable').toggleClass('col-lg-12 col-lg-9');

                                                           
This will toggle between 9 column width and 12, but this will only work on a large screen that isn't resized.
If I dynamically resize the browser to anything else, this will not work.

My assumption is I need some way to toggle multiple screen combos like:

 $('#theMainTable').toggleClass('[b]{col-lg-12 col-md-12 col-sm-12 col-xs-12}[/b] {col-lg-9 col-md-9 col-sm-9 col-xs-9}');

(although the above seems to only work for small resolutions)


the best i can try is:

		$('#theMainTable').toggleClass('col-lg-12 col-lg-9');
		$('#theMainTable').toggleClass('col-md-12 col-md-9');
		$('#theMainTable').toggleClass('col-sm-12 col-sm-9');
		$('#theMainTable').toggleClass('col-xs-12 col-xs-9');

but this doesnt work dynamically. i.e. it works for any resolution you resize to, so long as you refresh the page first

any help?