title: Need to change class in CSS for a DIV based on different screen sizes
body: <p><strong>Need to change class in CSS for a DIV based on different screen sizes</strong></p>
  
  <pre><code>&lt;div id="tab" class="tab_small"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I need to change class of DIV having ID "tab" to "tab_small","tab_medium" &amp; "tab_large"
  based on the screen size using css only</p>
  
  <pre><code>@media(max-width:450px){tab_small class will apply} 
  @media(min-width:450px) and (max-width:768px){tab_medium will apply}
  @media(min-width:768px) and (max-width:990px){tab_large will apply}
  </code></pre>
  
  <p>Is that doable?</p>
  
  <p>with JS I can do, Is there a way to do with CSS in bootstrap?</p>
  
  <p><strong>If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?</strong></p>
  
  <p>Thanks in advance!</p>