如何使元素占用两列

Question

我有一个四列布局设置，列数 - 不带表 - 我想让第一段跨越两列。

这就是我所拥有的

<div>
    <p>I want this first paragraph to be two columns wide</p>
    <p>The rest of the content should continue to follow the 4 column set up.</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
</div>

CSS：

div{ column-count: 4; }
div :first-child{ column-span:all; width: 50%; }

但是剩下的列从第一段的底部开始，并没有超过它的右侧。我的目标是实现this。

之类的东西

请帮忙