Jquery CSS3列中断

我刚刚实现了一个使用css3列的布局，现在我想知道如何在所有浏览器中强制断列。 只是搜索了（至少）互联网的漏洞，但找不到解决方案，因为以前的分栏似乎对非webkit浏览器的布局没有影响。Firefox中似乎没有实现

基本上，我想要的是，每个具有特定类（.break column before in the fiddle）的标记都会分解成一个新列。这似乎是一项不可能完成的任务。有什么建议吗

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

在注释中提到的另一个问题（）中找到的解决方案确实打断了前面的列，但抑制了div中进一步的列打断。这对于我的布局是不可能的，因为它负责并且只有一个水平滚动条

网址如下： 小提琴（如评论中所建议的）可以在这里找到：

---

如果纯css3是不可能的，我也愿意使用jQuery获得答案。

你能提供一个与NA一起玩的页面吗，但我可以提供页面。“选定作品”应在下一栏中开始。嗯。。。我应该回答这个问题吗。。？不，他显然不太在意，甚至懒得贴小提琴。我个人不喜欢在页面代码中寻找解决方案。如果您创建一个简单的JSFIDLE来解决这个问题，人们将更倾向于尝试回答，并且还将提供一个解决方案供人们在将来查看。我认为这个问题很有趣，人们可能会发现它很有用。与此同时，你可以查看这个问题，看看它是否回答了你的问题：

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