PCでは改行、スマホでは改行をなくしたい

PCでは改行したいが、スマホで見た時には改行したくない。
いろんなやり方があるので、参考として。

PCは改行、スマホで改行を消す

▼HTML PCは改行、スマホで改行を消す(横幅767px以下の場合だけ改行を消す)

<p>
  山路を登りながら、こう考えた<br>
  智に働けば角が立つ。<br class="s-br-kesu">
  情に棹させば流される。<br class="s-br-kesu">
  意地を通せば窮屈だ。<br class="s-br-kesu">
  とかくに人の世は住みにくい<br>
  住みにくさが高じると、安い所へ引き越したくなる。<br class="s-br-kesu">
  どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る<br>
  草枕 夏目漱石
</p>

▼CSS PCは改行、スマホで改行を消す(横幅767px以下の場合だけ改行を消す) 

/* スマートフォン向けCSS 画面の横幅767px以下の場合 */
@media screen and (max-width: 767px) {
  .s-br-kesu {
    display: none; /* 非表示 */
  }
}

▼画面を伸縮させてみてください。(改行される部分と、されない部分があるのが分かります)

山路を登りながら、こう考えた。
智に働けば角が立つ
情に棹させば流される
意地を通せば窮屈だ
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
草枕 夏目漱石

PCで改行を消す、スマホで改行を出す

▼HTML PCで改行を消す、スマホで改行を出す(横幅767px以下の場合だけ改行を出す)

<p>
  山路を登りながら、こう考えた。<br>
  智に働けば角が立つ。<br class="s-br-dasu">
  情に棹させば流される。<br class="s-br-dasu">
  意地を通せば窮屈だ。<br class="s-br-dasu">
  とかくに人の世は住みにくい。<br>
  住みにくさが高じると、安い所へ引き越したくなる。<br class="s-br-dasu">
  どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。<br>
  草枕 夏目漱石
</p>

▼CSS PCで改行を消す、スマホで改行を出す(横幅767px以下の場合だけ改行を出す)

/* PCで改行を消す */
.s-br-dasu {
  display: none; /* 非表示 */
}
 
/* スマートフォン向けCSS 画面の横幅767px以下の場合 */
@media screen and (max-width: 767px) {
  .s-br-dasu {
    display: block; /* 表示 */
  }
}

▼画面を伸縮させてみてください。(改行される部分と、されない部分があるのが分かります)

山路を登りながら、こう考えた。
智に働けば角が立つ
情に棹させば流される
意地を通せば窮屈だ
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
草枕 夏目漱石