Javascript 如何使li元素中的div在css中首先出现

我试图让我的div出现在它自己的行上，并迫使li进入下一行。我无法更改html或重新组织元素。它需要是一个css唯一的解决方案

以下是一个例子：

当前输出如下所示：

Racquet Sports - Tennis

Racquet Sports
Tennis

我希望输出如下所示：

Racquet Sports - Tennis

Racquet Sports
Tennis

---

清除了答案以使其更具可读性：

li {display:flex;flex-direction:column;list-style-type:none;}
li div {order:1;} 
li span {order:2;} 

---

这里是Jsfiddle:

您可以使用其中描述的任何技术，这些技术还允许您对元素进行重新排序。使用最佳浏览器支持最简单的方法可能是：

li {
  display: table;
}

#group {
  display: table-header-group;
}

---

请在您的帖子中包含所有相关代码，不要只包含链接。你的帖子应该独立于任何其他资源；考虑一下如果网站将来发生了什么会发生什么！（我们知道这会很糟糕。）此外，有些人在公司防火墙后面，禁止使用代码共享网站。请在帖子中包含所有相关代码，不要只包含链接。你的帖子应该独立于任何其他资源；考虑一下如果网站将来发生了什么会发生什么！（我们知道，这会很糟糕。）此外，一些人在禁止使用代码共享网站的公司防火墙后面。不幸的是，输出与我的输出不匹配。“球拍运动”应该是第一位。嘿，杰克！我已经更新了答案，添加了第三个解决方案，允许您根据需要对项目进行排序！