jquery - CSS3 段区切り

Question

css3 列を使用してレイアウトを実現したばかりで、すべてのブラウザーで列区切りを強制する方法を知りたいと思っています。(少なくとも) 穴のインターネットを検索しただけで、解決策が見つかりませんでした。column- break-beforeは Webkit 以外のブラウザーのレイアウトに影響を与えないようです。Firefox には実装がないようです。

基本的に、私が欲しいのは、特定のクラス（フィドルの.break-column-before）を持つすべてのタグが新しい列に分割されることです。不可能な作業のようです。助言がありますか？

基本的な HTML

<div class="content">
    <div id="main">
        <h1>Headline 1</h1>
        <p>Text...</p>
        <h2 class="break-column-before">Bastards.</h2>
        <p>More Text...</p>
    </div>
</div>

列は次のように生成されます。

-moz-column-width: 280px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #eee;
-webkit-column-width: 280px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #eee;
column-width: 280px;
column-gap: 20px;
column-rule: 1px dashed #eee;

コメントに記載されている他の質問 ( CSS3 Column Break ) にある解決策は、前に列を分割しますが、div 内のさらなる列分割を抑制します。責任があり、水平スクロールバーしかないため、これは私のレイアウトでは不可能です。

Web サイトはここにあります: Website with the Problem フィドル (コメントで提案されているように) はここにあります: jsFiddle

純粋なcss3が不可能な場合は、jQueryを使用して回答することもできます。