Изменение имени класса с помощью jquery с учетом определенного диапазона ширины (медиа-запрос)

У меня есть следующий HTML-код, который я пытаюсь для изменения:

<div class="col1 width8"><img src="images/entity.jpg"></div>

Я хочу использовать медиа-запросы, но я не хочу изменять CSS, а скорее заменяю имя класса с width8 на width6. Обычно это невозможно со стандартным медиа-запросом, приведенным ниже:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

Я хочу использовать jquery для удаления класса и добавления класса, когда ширина окна составляет от 1240 до 1484 пикселей. Можете ли вы помочь мне с jquery-альтернативой медиа-запросам для изменения встроенных классов и имен идентификаторов?

Вот мой jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });