こんにちは、Shota(@Mii4a_2501)です！
BootstrapやMaterialize等のフレームワークを用いてフロントエンドの記述をしていく際、
col-s-4(Bootstrap)あるいはcol s9(Materialize)などといったグリッドシステムを活用することがあると思います。
自分は現在Materializeを用いてアプリ作成をしており、windowサイズのwidthが小さくなった際、サイドバー(class="s3")を表示しないようにしているのですが.....
問題点
↑（画面幅全体です。）
この写真のように、サイドバー(class="s3")が表示されなくなったことで残りのグリッドシステム適用内の要素(class="s9")が左側に詰められてしまいました。これは見た目上あまり気持ちが良いとは言えませんね....。（そもそも設計の問題かもしれませんが....）
また、HTML内で記述したclass名に紐づけられたプロパティを読み込んでいるため、cssで変更を試みようにも改善は厳しそうです。そこで、JavaScriptあるいはjQueryを用いてclass名を切り替えることでこの問題に対応しようと思います。
改善方法
window.addEventListener('resize',function(){constsmWindowSize=600;//cssを切り替えるときの画面幅consttarget=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では次のように書けそうです。
こちらの方が変更の際の把握はしやすいかも？
$(window).on("resize",function(){constsmWindowSize=600;if(window.innerWidth<=smWindowSize){$("#hoge").removeClass("s9");$("#hoge").addClass("s12");} else{$("#feed-items_content").removeClass("s12");$("#feed-items_content").addClass("s9");}});こうすると....?
はい！クラス名を切り替えたことで見た目も思い通りになりましたね！
(開発途中なので編集と削除の部分はお許しを.....）
以上が誰かの助けになったら幸いです！ご覧いただきありがとうございました！
