Hide or remove a div class at mobile viewport?

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:

<div class="class1 class2"></div>

And you want to remove “class2” @media (max-width: 768px) Creating an output of:

<div class="class1"></div>

…once the 768px threshold has been reached.

So far I have come up with nothing other than this non-functional code:

<script>
 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").hide();
  }
     else {
       $(".class2").show();
      }
  });
</script>

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.

Answer

I’m not sure I get this, but are you just trying to toggle a class?

$(window).on('resize', function () {
    $('.class1').toggleClass('class2', $(window).width() < 768);
});

FIDDLE

jQuery has addClass(), removeClass() and toggleClass() methods readily available.

Note that screen is already defined in javascript.