Reversing the order of a list of items

There are some situations where you want your list of items to be in a reversed order. For example in Squarespace when you add a new project, it places the newly created project at the end of the list, meaning that the list items will be displayed the oldest first and the newest last. Bummer !

There can be also situations where on a click of a button(maybe a filter button) you would be able to reverse the list or reverse it back to the original order.

CSS would be the right candidate to do this job, since flexbox and grid dominate nowadays the layouts of the webpages. Let’s see.

First we create a list and write some basic CSS to make it look pretty and the items to be one next to the other on multiple lines.

As you can see flexbox is used to make the items stay next to each other in every row.

This is how things look like at the beginning:

Now we will attempt to reverse the order of this 5 item list with the row-reverse value:

The outcome is this:

It did reverse it but, not as we wanted it. We want the box with number 1 inside to be the last item and to be in the 2nd row on the left.

We can play with direction property and aligning items to the end of the flexbox which in this case will be left(because of the direction value):

Still not ok. We need to break the flow to get that last item to break in the first row and push out the one item to the next row. But how?

Another attempt, let’s use grid:

This is the basic order and there is no reverse in grid. There is direction: rtl or grid-auto-flow: dense but that didn’t do the trick for me.

If the content of the boxes are not complex, just like in my example than you could work with the counter, counter-increment properties. Manuel Matuzović has a great article about this: https://www.matuzo.at/blog/reverse-ordered-lists/

But if you have list items with multiple lines and html inside, than you need a more robust solution. Where CSS fails, javascript prevails !

Just a few line of javascript code does the trick. First you get the total number of the boxes with boxes.length, then you iterate through them and to each of them you add the flexbox property order, but the value will start from the number of boxes minus the index of the iterated box. Voila !

Let’s take a look at the DOM:

Of course the precondition is to leave the .boxes class with display: flex and flex-wrap: wrap; . That’s all !

The entire code you will find it here to copy and paste, first the CSS code then the JS code.

.boxes {
   display: flex;
   flex-wrap: wrap;
}

const boxes = document.querySelectorAll('.box');
const totalBoxes = boxes.length;

boxes.forEach((item,i) => {
   item.style.order = totalBoxes - i;
});

Note: In Manuel’s article this solution was also mentioned:

ol {
  transform: rotate(180deg);
}

ol > li {
  transform: rotate(-180deg);
}

You rotate some element upside down and then you rotate back the children but of course the scrollbar will be on the unwanted side, probably. But who knows, maybe you are into that. Also that did not behave too well with flexbox.

Anyway, you guys are free to experiment further, I just provided a short javascript solution.

0