CSS列 - 将标题置于文本流的第2列

Question

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

目前的输出是：

所需的输出是：

我的代码示例： https://jsbin.com/jadevur/1/edit?html,css,output

<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>

HTML和CSS都在上面的jsbin中

Answer 1

有趣的问题，我可以看到你为什么要这样做。但是，如果不更改HTML标记，则无法完成。根据{{​​3}}：

  

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

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

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