SPとPCのレスポンシブデザインで改行位置を変えたい場合のCSSハック

例えば、

SPの場合

あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ
青いそら、うつくしい森で
飾られたモリーオ市、
郊外のぎらぎらひかる
草の波。

PCの場合

あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

こんな感じで１行に表示させたい文章があったとする。
単純に <br> を入れようとしてもSPだけ、PCだけで改行したいポイントがある。

あのイーハトーヴォの<br class="br-sp">
すきとおった風、<br>
夏でも底に冷たさをもつ<br class="br-sp">
青いそら、<br class="br-pc">
うつくしい森で<br class="br-sp">
飾られたモリーオ市、<br>
郊外のぎらぎらひかる<br class="br-sp">
草の波。

.br-sp {
  display: none;
}

@media screen and (max-width: 1080px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline-block;
  }
}

こんな感じで <br> にクラスを振り、CSSで表示を切り替えると実現できる。