CSS-Spalten - Position Titel in der zweiten Spalte des Textflusses

Question

Ich habe Text über CSS-Spalten - mit einem Titelabschnitt im Markup. Ohne mein Markup zu ändern, ist es möglich, den Titelabschnitt an den Anfang der zweiten Spalte zu setzen und den Rest des Textes entsprechend über die Spalte fließen zu lassen?

Stromausgang ist:

Die gewünschte Ausgabe entlang der Linien ist:

Beispiel meines Codes hier: 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 und CSS sind sowohl in die Jsbin über

Answer 1

Interessante Frage, und ich kann verstehen, warum du das machen willst. Ohne das HTML-Markup zu ändern, kann dies jedoch nicht durchgeführt werden. Nach W3 spec:

Ein mehrspaltiges Element richtet gemäß CSS 2.1 Abschnitt 9.4.1 einen neuen Blockformatierungskontext ein.

Es gibt keine Möglichkeit, innerhalb des Blocks der .intro DIV in die gewünschte Position zu bewegen, und wenn es draußen war, konnte es nicht Position der Elemente innerhalb es beeinflussen.

Das Modell flex-box ermöglicht eine Neuanordnung. Wenn also das Markup geändert werden kann, ist dies die Methode, die anstelle von Spalten verwendet wird. Obwohl es ohne Javascript schwierig sein könnte.