title: Change Bootstrap column class attribute based on screen size/media query
body: <p>I am using Twitter's bootstrap and I have a problem. I am using the grid system and in my html have used the <code>col-lg-6</code> class to create a two different columns with equal width. See code below:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="row sameHeightCols"&gt;
          &lt;div class="col-lg-6"&gt;
              &lt;div class="contentBlock"&gt;
                  &lt;h3&gt;Header&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6"&gt;
              &lt;h3&gt;Header2&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue I am having is that when it hits a certain screen size it breaks and some of the content in the left block disappears. This occurs when screen size is between <code>col-lg</code> and <code>col-md</code>. What I would like to to do is change the classes at a certain screen size so it changes to this.</p>
  
  <pre><code>&lt;div class="col-lg-9"&gt;
      &lt;div class="contentBlock"&gt;
        &lt;h3&gt;Header&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-3"&gt;
       &lt;h3&gt;Header2&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this possible in css with a media query? or do I need to use javascript? Any help would be greatly appreciated as I have done a lot of research and cannot find a solution. Please also let me know if any further code/info is required.</p>
  
  <p>Thanks.</p>