Demoing problems with orphaned headers and CSS columns

CSS columns come with a lot of problems to work out.

HTML

<ul class="columns">
<li>Donec sed odio dui.</li>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
<li>Sed posuere consectetur est at lobortis.</li>
<li>Donec sed odio dui.</li>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
<li>Sed posuere consectetur est at lobortis.</li>
<li>Donec sed odio dui.</li>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
<li>Sed posuere consectetur est at lobortis.</li>
</ul>

CSS

.columns {
  column-count: 4;
column-gap: 150px;
}