title: Hide or remove a div class at mobile viewport?
body: <p>First and foremost, I am very aware of CSS media queries.  My problem is this: When you have div classes stacked in one div; Example:</p>
  
  <pre><code>&lt;div class="class1 class2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And you want to remove "class2" @media (max-width: 768px)
  Creating an output of:</p>
  
  <pre><code>&lt;div class="class1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...once the 768px threshold has been reached.</p>
  
  <p>So far I have come up with nothing other than this non-functional code:</p>
  
  <pre><code>&lt;script&gt;
   jQuery(document).resize(function () {
    var screen = $(window)    
     if (screen.width &lt; 768) {
      $(".class2").hide();
    }
       else {
         $(".class2").show();
        }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am really having a hard time finding an answer that works for this.  I do not want to block the entire div's contents!  Just remove one of two classes.</p>