code_note

簡単ver,

<br class="hide-sp">
<br class="hide-pc">

/* ===========================================
	    SP
  =========================================== */
  @media screen and (max-width: 47.9375em) {
    .hide-sp {
      display: none !important;
    }
  }
  
  
  /* ===========================================
       PC tablet
    =========================================== */
  @media screen and (min-width: 48em) {
     .hide-pc {
      display: none !important;
    }
  }

==========================================

<p>AAAAAAAAA <span class="sp-break"></span> ※AAAAAAAAA</p>

.sp-break::after {
  content: "\A";
  white-space: pre;
}

“/A”→「改行をする」の指示。
white-space : pre ; →HTMLで表示した時に、場面上も改行するようにという指示。

@media(min-width:769px) {
  .sp-break::after {
    content: "";
  }
}

@mediaでPC幅になると指示を取り消す。

SPのみで改行・PCのみで開業

==========================================