BootstrapのブレイクポイントをjQueryで使用する方法

jQuery単独でメディアクエリ様のブレイクポイントを指定する場合、

$(window).on('load resize', function() {
  var windowWidth = window.innerWidth;
  if (windowWidth > 1140) {
    // デスクトップ表示時の処理
  } else if (windowWidth > 720) {
    // タブレット表示時の処理
  } else {
    // スマホ表示時の処理
  }
});

のように、幅の値をブレイクポイントとして個別に入力する方法があります。

しかし、フレームワークにBootstrapを使用しており、かつ、ブレイクポイントを任意に変更した場合に、JSファイル側もそれに合わせて修正する必要があります。
まぁ、そんなに手間では無いですが、例えばミスしやすいポイントでもあります。

そこで、元々BootstrapのCSSに実装されている、Hiding elementsを利用してブレイクポイントを代替してみます。

Display property https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

モバイルフレンドリーな開発をより迅速に行うには、デバイスごとに要素を表示および非表示にするための反応的な表示クラスを使用します。同じサイトの全く異なるバージョンを作成するのではなく、各スクリーンサイズに対応して要素を非表示にする。

例として、OLリストをウィンドウズ幅に応じて、グループに分けるようにjQueryで指定してみます。

ポイントとしては、

• デスクトップで表示、タブレットで表示、スマホで表示する専用のDIVコンテンツを用意する（今は確認のため、テキストを表示させているが本来は不要）。
• ウィンドウサイズが切り替わった際に、それらの表示/非表示状態を認識して、ブレイクポイントの代替とする。

です。

Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita https://qiita.com/r_abe01/items/a3a2e94b5162d949037b

レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事...