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可能會很困難。