Html 使用flex在三列上设置全宽标题

我试图在多个列中布置一个容器，但在所有列中都有一个标题

不幸的是，Firefox还不支持

列span

CSS3属性，因此我正在寻找一种不使用

列span

的替代实现，我认为使用

flex

应该是可行的

这是我必须使用的HTML我无法通过将部分HTML包装到子容器中来修改HTML。因此，我正在寻找CSS解决方案（或者js）

大字标题
项目名称
明渠，明渠，明渠，明渠，明渠，明渠。我们将在康格海滨度假。欧盟第二大帝国

项目2标题
阿利奎姆·帕鲁姆·南·多明·埃奥德姆·阿梅特。莱格尔·布兰迪特·杜伊斯（Legere blandit duis nisl）的直径。多洛尔·多洛尔·多洛尔·多洛尔是拉奥里特的权贵。

项目3标题
这是一个非常重要的问题。哈本·乌兰科珀·伊里乌拉·厄罗斯·柳斯。精英埃蒂亚姆·戈蒂卡·米拉姆·杜伊斯的恶魔。多洛·布兰迪特·帕鲁姆（Dolor blandit parum）不是一个不平等的解决方案。通常情况下，使用知识进行交流。四分之一时间模式。

这个工具非常方便。对HTML没有任何更改

#包装器{
显示器：flex；
柔性包装：包装；
}
氢{
弹性：0.100%；
边框底部：1px实心#666666；
}
h3{
顺序：1；
弹性：0.33%；
}
p{
顺序：2；
弹性：0.33%；
}

大字标题
项目名称
明渠，明渠，明渠，明渠，明渠，明渠。我们将在康格海滨度假。欧盟第二大帝国

项目2标题
阿利奎姆·帕鲁姆·南·多明·埃奥德姆·阿梅特。莱格尔·布兰迪特·杜伊斯（Legere blandit duis nisl）的直径。多洛尔·多洛尔·多洛尔·多洛尔是拉奥里特的权贵。

项目3标题
这是一个非常重要的问题。哈本·乌兰科珀·伊里乌拉·厄罗斯·柳斯。精英埃蒂亚姆·戈蒂卡·米拉姆·杜伊斯的恶魔。多洛·布兰迪特·帕鲁姆（Dolor blandit parum）不是一个不平等的解决方案。通常情况下，使用知识进行交流。四分之一时间模式。

对不起，我输入的html有点误导人：它不限于三个（或更少）h3+p组，它可以有更多，但不一定是3的倍数。这就是为什么我开始使用flex flow:column wrap，因为我希望标题后面的文本像报纸文章一样在列中进行包装。在CSS中，如果不修改HTML，这是不可能的。至少，标题应该有自己的包装。如果只在标题周围加一个包装，情况会发生什么变化？我可以在标题周围加一个标题包装，但我不能在其他所有内容周围加一个章节包装。

<div id="wrapper">
  <h2>Headline</h2>
  <h3>Item title</h3>
  <p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii. </p>
  <h3>Item 2 title</h3>
  <p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
  </p>
  <h3>Item 3 title</h3>
  <p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
  </p>
  <h3>Item 4 title</h3>
  <p>Eu laoreet decima est est at. Parum anteposuerit notare molestie typi nonummy. Claritatem quod quam dolor saepius qui. Et in processus et tincidunt typi. Cum augue facilisi liber ad doming. Hendrerit eorum per eleifend vero mirum. Decima laoreet nulla dolore tincidunt iusto. Eleifend parum aliquam ut dolore facilisis. Volutpat modo in in zzril nunc. 
  </p>
  <h3>Item 5 title</h3>
  <p>Clari mirum odio qui quam euismod. At fiant tempor zzril in autem. Facit nonummy dignissim eros notare nulla. Exerci qui in zzril ex qui. Dignissim et saepius at anteposuerit hendrerit. Congue videntur congue augue est dynamicus. Imperdiet legunt lorem dolore dolore in. Mazim typi mazim habent volutpat magna. Accumsan habent lobortis hendrerit me lobortis. 
  </p>
  <h3>Item 6 title</h3>
  <p>Sed in claritas dolor eu volutpat. Nostrud insitam magna dolore typi exerci. Esse veniam velit esse esse anteposuerit. 
  </p>
  <h3>Item 7 title</h3>
  <p>Odio iis commodo insitam et nobis. Euismod commodo legere eodem commodo clari. Consectetuer Investigationes eodem quod wisi facit. Nibh id claram iriure praesent qui. Ut non modo zzril claram claram. Et est est wisi typi quinta. 
  </p>    
</div>