Reordering a list with CSS

Make the list a table With flexbox

Set display: flex and flex-flow: column on the <ul>, and set the list items which need to appear at the top to order: 1 and the others to order: 2.

Set display: table on the <ul> and then display: table-header-group on the list-items to appear at the top, and display: table-row-group on the others. Note: this doesn't work; it seems that you can't intermingle "top" rows and "body" rows in a "table" this way.

• At the bottom, 1
• At the top, 1
• At the bottom, 2
• At the bottom, 3
• At the top, 2
• At the bottom, 4
• At the bottom, 5
• At the top, 3
• At the bottom, 6
• At the bottom, 7
• At the top, 4
• At the bottom, 8
• At the bottom, 9
• At the top, 5
• At the bottom, 10
• At the bottom, 11