title: Switching CSS classes based on screen size
body: <p>CSS newby here...</p>
  <p>I'm looking at a responsive framework and imagining how I would accomplish different tasks.</p>
  <p>Based on the size of the screen, they have classes added to the body tag such as:</p>
  <p><strong>.PhoneVisible, .DesktopVisible, etc...</strong></p>
  <p>They also have classes to make links into buttons :</p>
  <p><strong>.btn, small-button, med-button, large-button</strong></p>
  <p>I'm puzzled on how you would go about changing your CSS.  I.E. something like:</p>
  <pre class="lang-js prettyprint-override"><code>    &lt;a href=&quot;#&quot; class=&quot;MyButtonOptions&quot;&gt;XXXX&lt;/&gt;
  
      .PhoneVisible .MyButtonOptions { btn small-button }
      .TabletVisible  .MyButtonOptions { btn  med-button }
      .DesktopVisible .MyButtonOptions { btn large-button }
  </code></pre>
  <p>Do you have to set the varying options individually?</p>
  <p>i.e.  <strong>.PhoneVisible .MyButtonOptions { height:30px; }</strong> ?</p>
  <p>All advice appreciated!</p>