クラスを付けてレスポンシブルする方法

/*---------------デバイス別表示・非表示---------------*/
/* PC専用（769px以上で表示） */
.pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

/* タブレット専用（768px〜1024px） */
.tablet-only {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}

/* スマホ専用（576px以下で表示） */
.sp-only {
  display: none;
}
@media screen and (max-width: 576px) {
  .sp-only {
    display: block !important;
  }
}

/* モバイル専用（1023px or 768px以下で表示：タブレット+スマホ） */
.mobile-only {
  display: none;
}
@media screen and (max-width: 1023px) {
  .mobile-only {
    display: block !important;
  }
}
/*---------------デバイス別表示・非表示の設定終了---------------*/