title: Changing a class name with jquery given a specific width range (media query)
body: <p>I have the following html that I am trying to modify:</p>
  
  <pre><code>&lt;div class="col1 width8"&gt;&lt;img src="images/entity.jpg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to use media queries, but I do not want to modify the css, but rather replace the class name from width8 to width6. This is not typically possible with the standard media query below:</p>
  
  <pre><code>@media only screen and (min-width: 1240px) and (max-width: 1484px) { }
  </code></pre>
  
  <p>I wish to use jquery to remove the class and add a class when the window is between 1240 and 1484px wide. Can you assist me with the jquery alternative to media queries for modifying inline class and id names?</p>
  
  <p>Here is my jquery</p>
  
  <pre><code> $(document).ready(function() { 
      $(window).resize(function(){
              var width = $(window).width();
  
              if(width &gt;= 1240 &amp;&amp; width &lt;= 1484){
                  $('#info').removeClass('col9').addClass('col8');
              }
              else if(width &gt;= 1485 &amp;&amp; width &lt;= 1788){
                  $('#info').removeClass('col8').addClass('col7');
              }
  
              else if(width &gt;= 1789 &amp;&amp; width &lt;= 2237){
                  $('#info').removeClass('col7').addClass('col6');
              }
  
              else if(width &gt;= 2238 &amp;&amp; width &lt;= 3000){
                  $('#info').removeClass('col7').addClass('col6');
              }
              else{
                  $('#info').removeClass('col8').addClass('col9');
               }
              })
  
  .resize();
  
      });
  </code></pre>