title: Toggle Bootstrap Column Properties inside a DIV Tag
body: <p>I've been kicking myself trying to swap Bootstrap class properties inside a div tag.  I want to take full advantage to Bootstrap 12 column grid, but toggle 12 columns into one 9 columns and 3 columns layout. Here's the example: </p>
  
  <p>Here's the <a href="https://jsfiddle.net/UXEngineer/044c1973/6/" rel="nofollow noreferrer"><strong>JDFIDDLE DEMO</strong></a>.  This the sample code:</p>
  
  <pre><code>&lt;div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
    &lt;div id="LeftColumn" class="col-md-9 col-sm-9 col-xs-12"&gt;
      &lt;h3&gt;Left Column&lt;/h3&gt;
      &lt;p&gt;Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.&lt;/p&gt;
      &lt;p&gt;&lt;span class="strong"&gt;DESIRED RESULT:&lt;/span&gt;Toggle the properties &amp;lt;div class="col-md-12 col-sm-12 col-xs-12"&amp;gt; to &amp;lt;div class="col-md-9 col-sm-9 col-xs-12"&amp;gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.&lt;/p&gt;
      &lt;/p&gt;
      &lt;div id="Bar" class="main-container collapse in"&gt;
        &lt;a href="#Foo" class="btn btn-success" data-toggle="collapse"&gt;Toggle Right&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;br /&gt;
    &lt;/div&gt;
    &lt;div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12"&gt;
      &lt;div id="Foo" class="main-container collapse" style="border: dotted 1px green;"&gt;
    Toggle Left Column &lt;a href="#Bar" class="btn btn-warning" data-toggle="collapse"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;Additional content will be displayed in this column once triggered.
        &lt;div style="height: 150px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to maintain the toggle functionality already in place in the existing buttons "Toggle Right" and "Toggle Left" buttons.</p>
  
  <p>I would immensely appreciate some help getting to the classes in both RightColumn and LeftColumn to toggle from 12 (col-md-12) to 9 (col-md-9) and 3 (col-md-3), respectively.</p>