特定のwindowサイズ変更時にJavaScriptでcssのクラス名を切り替える方法

こんにちは、Shota(@Mii4a_2501)です！
BootstrapやMaterialize等のフレームワークを用いてフロントエンドの記述をしていく際、
**col-s-4(Bootstrap)あるいはcol s9(Materialize)**などといったグリッドシステムを活用することがあると思います。

自分は現在Materializeを用いてアプリ作成をしており、windowサイズのwidthが小さくなった際、サイドバー(class="s3")を表示しないようにしているのですが.....

追記 jQueryのコードを改善しました。

問題点

↑（画面幅全体です。）

この写真のように、サイドバー(class="s3")が表示されなくなったことで残りのグリッドシステム適用内の要素(class="s9")が左側に詰められてしまいました。これは見た目上あまり気持ちが良いとは言えませんね....。（そもそも設計の問題かもしれませんが....）

また、HTML内で記述したclass名に紐づけられたプロパティを読み込んでいるため、cssで変更を試みようにも改善は厳しそうです。そこで、JavaScriptあるいはjQueryを用いてclass名を切り替えることでこの問題に対応しようと思います。

改善方法

Javascript

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文でwindow幅が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");
    }
   });

こうすると....?

はい！クラス名を切り替えたことで見た目も思い通りになりましたね！
(開発途中なので編集と削除の部分はお許しを.....）

正直なところ、もっといい手があるのではないかなと感じているのですが
誰かの助けになったら幸いです！ご覧いただきありがとうございました！