How can I get my div inside my li element to appear first with css

Question

I am trying to get my div to appear on it's own line and force the li to the next line. I can't change the html or reorganize the elements. It needs to be a css only solution.

Here is an example: https://fiddle.jshell.net/129rgqr7/

The current output looks like this:

Racquet Sports - Tennis

I want the output to look like this:

Racquet Sports
Tennis

Answer 1

Cleared the answer to make it more readable:

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

And here's the Jsfiddle: https://fiddle.jshell.net/6puvsmn8/

Answer 2

You can use any of the techniques described in this article which also allows you to reorder the elements. Easiest with best browser support is perhaps:

li {
  display: table;
}

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