Changing a class name with jquery given a specific width range (media query)

Question

I have the following html that I am trying to modify:

I

Answer 1

You can try this.

$(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   if(width >= 700 && width <= 900){
       $('#myelement').removeClass('width8').addClass('width6');
   }
   else{
       $('#myelement').removeClass('width6').addClass('width8');
   }
})
.resize();//trigger the resize event on page load.