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

Take a look at enquire.js

It is a no dependency library that allows you to respond to media queries with JavaScript.

For example:

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", {
    match: function() {
        $info.addClass('col8');
    },

    unmatch: function() {
        $info.removeClass('col8');
    }
}).listen();

Then you can simply register media queries for the various breakpoints in your site so classes will be added and removed upon successful match.