スマホ表示とデスクトップ表示でレスポンシブに改行位置を変える時はbrタグにクラスを付けてcssだけで管理すると超楽な件

レスポンシブコーディングをするときに、デスクトップ表示とスマホ表示でテキストの改行位置を変えたい時、みなさんどうしてますか？

私の場合、少し前までPHP側からユーザーエージェントでスマホ分岐させ、brタグの位置を変えたpタグごと記述を出し分けていました...

例えば、IS_MOBILEにスマホかどうかの真偽値が入っているとして、

<?php if (IS_MOBILE): ?>
  <!-- スマホ  -->
  <p>
    テキストテキスト<br>
    テキスト<br>
    テキストテキスト 
  </p>
<?php else: ?>
  <!-- デスクトップ -->
  <p>
    テキストテキスト<br>
    テキストテキストテキスト
  </p>
<?php endif; ?>

こんな感じにしてたんです。

ところが、表題の通り、こんなことをせずともbrタグにクラスを付け、メディアクエリで表示・非表示を切り替えるだけでいいんですよね。

html側

<p>
  テキストテキスト<br>
  テキスト<br class="sp_br" >
  テキストテキスト
</p>

css

/* 例：br.sp_brはタブレット以上のサイズでは非表示にする */
@media screen and (min-width: 768) {
  .sp_br{
    display: none;
  }
}

*min-width 768については好きな値を。

今までなんて無駄なことをしてたのだろうかと思っちゃうほど楽です。笑

「brタグにもクラスを付けれるしcssも当てれる」という、すごく当たり前のことなんですが、意外と盲点で気付いてない人も多いのではないかなぁ〜と少し思ったので、そんな誰かの気づきになれば幸いです。