The Flexible Box Layout Module is a very powerful tool to style your webpages. It offers simple solutions for things like `the Holy Grail`
Here we do a dirty sorting trick:
Just push the buttons or table header to sort the stuff.
How does it work
Sort the elements on text and write the order attribute for CSS.
<li style="order: 7;">scstqehfr</li>
Then set the elements to display flex on the ol element:
.sorted{
display:flex;
flex-flow:column;
flex-direction:column;
}
Be aware:
Sorting this way is kind of superficial, it’s only ordered through CSS: It will show the elements in different order, but in the DOM there is no change at all. So traversing or accessing elements can be surprising, it will go in original/DOM order.
Sorting an table through Flexbox ruins the layout, because it resets the display property from `table-*` to `flex-*`. An additional trick to write the width explicitly is needed to maintain layout.