Splitting sentence in multiples lines (Bootstrap 4 + Mobile)

Just add spans and then use the media query to make them load as block specifically on mobile devices.

Eg ...

<div id="coolDiv">
 <span>Our large, heavy items and Same-Day Delivery items <span/><span>are delivered by our store </span><span>or one of our delivery partners.</span>
</div>

CSS:

@media (max-width: 768px) {
  #coolDiv span {
    display: block;
  }
}

DEMO

This will work for all the cases that you mentioned like <h1> or <p> tags. You can also use specific class to restrict this effect to your use case.

Playing with text on this fine of a level is pretty hard becuase you don't have access to the browser text engine. My best guess on how you could achieve this would be to have 2 tags and the on you want to show on desktop would be

<h1 class="d-sm-none d-xs-none"> Our large, heavy items and Same-Day Delivery items are delivered by our store or one of our delivery partners.</h1>
<h1 class="d-none d-sm-block d-xs-block">Our large, heavy items and Same-Day Delivery items<br>
are delivered by our store<br>
or one of our delivery partners.</h1>

Im not sure if these are the correct classes and having 2 h1 tags is bad for SEO however this could be a way you could achieve this. It's kinda janky but it should work.

You can wrap each of them in a div and manage it with flexbox, it will automatically push to next line when the width of screen is shorter than the h1 or p context