title: Add/Remove classes using media queries
body: <p><strong>My general question is how can one conditionally add or remove classes or ids to a particular class using css media queries alone? In the sample code below, for example, how could I add "Class_B" to all of the div's with "Class_A" when <code>@media all and (max-width: 1000px) and (min-width: 700px)</code>?</strong> </p>
  
  <pre><code>&lt;div class="Class_A"&gt;&lt;div&gt;
  </code></pre>
  
  <hr>
  
  <p>My specific case: I'm using Twitter Bootstrap v3.2.0.  I have a header with a series of buttons in it like so:</p>
  
  <pre><code>&lt;button class="btn navbar-btn"&gt;FooA&lt;/button&gt;
  &lt;button class="btn navbar-btn"&gt;FooB&lt;/button&gt;
  &lt;button class="btn navbar-btn"&gt;FooC&lt;/button&gt;
  </code></pre>
  
  <p><strong>When the screen jumps from medium (md) to small(sm), I would like to add the class "btn-sm" to all of those elements. How can I do that most efficiently/elegantly?</strong> (I would prefer not to use JS or add any additional libraries if that's possible)</p>
  
  <p>I realize I could add an arbitrary class to all those buttons like "btn-sm-duplicate" and only define it when the browser reaches a certain specification like the code below. However, it seems ugly to create a duplicate class when it's really not nec... Can you suggest something?</p>
  
  <pre><code>@media all and (max-width: 1000px) and (min-width: 700px) {
         btn-sm-duplicate{
  
  ::Copy/Paste all the attributes of btn-sm from bootstrap::
  
         }
  }  
  </code></pre>