How can I move to a new line the last word of a <h1> sentence on mobile, and in desktop mode break the sentence in 3 lines?

Question

I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop:

Grow your

business

faster

, and in mobile, it must look like:

Grow your business

faster

I haven't been able to figure out the way to do this.

Can you give me a clue?

Thanks.

I have tried with word-break, but haven't been successful yet.

Answer 1

You can use a <br> tag in a <span> for which you set up a CSS rule and a media query showing/hiding it:

.a {
 display: none;
}
@media screen and (min-width: 480px) {
 .a {
  display: inline;
 }
}

<h1>Grow your <span class="a"><br></span>business<br>faster</h1>