특정 Windows 크기를 조정할 때 JavaScript에서 CSS 클래스 이름을 전환하는 방법

안녕하세요, Shota( ㅎㅎㅎ )입니다!
Bootstrap이나 Materialize 등의 프레임 워크를 사용하여 프론트 엔드를 작성할 때,
col-s-4(Bootstrap) 혹은 col s9(Materialize)등과 같은 그리드 시스템을 활용하는 일이 있다고 생각합니다.

자신은 현재 Materialize를 이용해 앱 작성을 하고 있어 window사이즈의 width가 작아졌을 때, 사이드바(class="s3")를 표시하지 않게 하고 있습니다만.....

추가 jQuery 코드를 개선했습니다.

문제점

↑(화면 폭 전체입니다.)

이 사진과 같이 사이드바(class="s3")가 표시되지 않게 됨으로써 나머지 그리드 시스템 적용내의 요소(class="s9")가 왼쪽에 채워져 버렸습니다. 이것은 외형상 별로 기분이 좋다고는 말할 수 없네요..... (원래 디자인 문제일지도 모르지만....)

또, HTML내에서 기술한 class명에 관련지을 수 있었던 프로퍼티를 읽어들이고 있기 때문에, css로 변경을 시도하도록(듯이) 개선은 엄격할 것 같습니다. 그래서 자바 스크립트 또는 jQuery를 사용하여 클래스 이름을 전환하여이 문제를 해결하려고합니다.

개선 방법

자바스크립트

window.addEventListener('resize', function(){
    const smWindowSize = 600; //cssを切り替えるときの画面幅
    const target = document.getElementById('hoge'); //変更する対象 
    if (window.innerWidth >= smWindowSize){ //画面幅が600px以下の場合
      target[1].className = "s12" //クラス名変更 "col s9" => "col s12"
    } else {
      //window幅が600pxよりも大きい時
      target[1].className = "s9"
})

이와 같이 window에 대해서 addEventListener 메소드를 이용해, resize 이벤트로 화면폭의 변경을 감시하고 있습니다.
왜 else 문에서 윈도우 폭이 600px보다 위의 경우를 기술하고 있는가 하면, 폭 600px 이하에서 600px보다 큰 화면 폭으로 되돌렸을 때, class명이 s12인 채로 되어 버리기 때문입니다.

jQuery에서는 다음과 같이 쓸 수 있습니다.
이쪽이 변경시의 파악은 하기 쉬울지도?

jQuery

   $(window).on("resize", function(){
     const smWindowSize = 600;
     if (window.innerWidth <=  smWindowSize){
       $("#hoge").removeClass("s9").addClass("s12");
     }　else {
      $("#hoge").removeClass("s12").addClass("s9");
    }
   });

이렇게 하면....?

네! 클래스명을 바꾼 것으로 외형도 생각대로 되었네요! (개발 도중이므로 편집과 삭제 부분은 용서를.....) 솔직히, 좀 더 좋은 손이 있다고 생각합니다. 누군가의 도움이 되면 다행입니다! 봐 주셔서 감사합니다!