Reordering a list with CSS

Extra requirement: the list must be no more than a certain fixed height, and scroll vertically to fit within it.

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.
Note that the fixed-height-list requirement screws up flexbox, which does its best to fit all the flexed items into the fixed height rather than overflowing and scrolling. To avoid this, we need to set flex-shrink to 0 on the list items.

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. The first "header row" goes to the top of the list; others do not, presumably because a table's header rows are considered one header if they are adjacent in the code.

• 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