title: Dynamically changing class name based on window size
body: <p>I am using Twitter Bootstrap to create a responsive site using the following layout (simplified for this question):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;!-- Left menu --&gt;
          &lt;div class="span2"&gt;
              &lt;div class="sidebar-nav"&gt;
                  MENU CONTENT GOES HERE
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Content --&gt;
          &lt;div id="mainContent" class="span7"&gt;
              MAIN CONTENT GOES HERE
          &lt;/div&gt;
  
          &lt;!-- Right column --&gt;
          &lt;div id="rightColumn" class="span3 hidden-phone hidden-tablet"&gt;
              RIGHT COLUMN GOES HERE
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the browser window resizes to tablet size, the rightColumn div is hidden as expected - but it leaves white space next to the mainContent div (with a size of span3).</p>
  
  <p>I would like the mainContent div to expand to full width (so it fills out matches span10 in size).</p>
  
  <p>I am using the following jQuery code to dynamically change the class name for the mainContent div to achive this (and it works as expected):</p>
  
  <pre><code>$(document).ready(function() {
      var $window = $(window);
  
          // Function to handle changes to style classes based on window width
          function checkWidth() {
          if ($window.width() &lt; 980) {
              $('#mainContent').removeClass('span7').addClass('span10');
              };
  
          if ($window.width() &gt;= 980) {
              $('#mainContent').removeClass('span10').addClass('span7');
          }
      }
  
      // Execute on load
      checkWidth();
  
      // Bind event listener
          $(window).resize(checkWidth);
  });
  </code></pre>
  
  <p>My question: is this the preferred way to handle changes to spans in Twitter Bootstrap when the browser window resizes? Or should I just change the CSS for span7 for tablet screen sizes to match that of span10?</p>