Html CSS列-将标题定位到文本流的第二列

我的文本在CSS列中流动——标记中有一个标题部分。 在不更改标记的情况下，是否可以将标题部分放置在第二列的顶部，并使其余文本相应地在该列中流动

电流输出为：

所需的输出符合以下要求：

下面是我的代码示例：

---

HTML和CSS都在上面的jsbin中，这是一个有趣的问题，我可以理解您为什么要这样做。但是，如果不更改HTML标记，则无法完成此操作。根据：

多列元素根据CSS 2.1第9.4.1节建立新的块格式上下文

无法将.intro DIV移动到块内所需的位置，如果它在块外，则不会影响块内元素的位置

flex-box模型允许重新排序，因此如果可以更改标记，则可以使用该方法而不是列。尽管没有Javascript可能会很困难

<main>
<article>
<div class="intro">
<h1>Main Title</h1>
<h2 class="secondary">Secondary Title</h2>
<h2 class="tertiary">Tertiary Title</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a libero sagittis interdum ...... etc...
</p>
</article>