The Acorn Spirit’s Journey

“min-width: 768px”時には〇〇〇という感じ。

HTML

<div class="card card-body">
  <h3 class="card-title">タイトルタイトルタイトルタイトル</h3>
  <p class="lines">文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります。文章が入ります文章が入ります文章が入ります文章が入ります。</p>
</div>

Javascript/jQuery

// min-width: 768px クラスを付与・差し替える

$(window).on('load', function() {
  $('.card-body').find('.lines').each(function ( index, value ) {
    if (window.matchMedia('(min-width: 768px)').matches) {
      $(this).attr('class', 'card-text lines-1');
    } else {
      $(this).attr('class', 'card-text lines-2');
    }
  });
});

min-width: 768px は、タブレットやパソコンの時。
でなければ、スマホの時、と考えられますので
スマホとそれ以外の時で変化するものがある場合に使えます。

find ～ each は、上記の例でいうと
.card-bodyの下（子）にある.linesを探します。（ひとつだけではなくループ。繰り返し処理。）
もし”min-width: 768px” だったら、”card-text lines-1″クラスを付与。
でなければ、”card-text lines-2″クラスを付与、となります。