スマホの時だけ改行したい、PCの時は改行したくない。という場合のCSS

スマートフォンではしたい部分があるがパソコンでは改行せずに表示させたい！
そんな時に有効なCSSの書き方は？

意外とシンプルで基礎的なものを使います。
display: none; と display: block; を使いわける！

まず<br>に何かクラス名をつけてください（今回の例はわかりやすいように.pc_hidとしました）

<p class="mv_copy">安心の有機野菜で<br class="pc_hid">豊かな食卓を</p>

あとは、.pc_hidに対して下記のようにCSSで設定するだけです。

/*PCで無効*/
.pc_hid{
    display: none;
}

/*スマートフォンで有効*/
@media screen and (max-width:768px) {
    .pc_hid{
        display: block;
    }
}

これだけです。
かんたんで拍子抜けしましたか？

CSSは知っているものを工夫して使うこともとても多いです。各プロパティの挙動をしっかりと理解し、柔軟に試してみましょう！