CSS列 - 在文本流的第二列中放置标题

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标记，则无法完成。根据W3 spec：

按照CSS 2.1节9.4.1，多列元素建立一个新的块格式上下文。

没有办法将.intro DIV移动到块内的所需位置，如果它位于块外，则不会影响块内元素的位置。

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