Reverse the Order of HTML Elements using CSS3 Flexbox

Do you know you can reverse the order of HTML elements using CSS? Yes, you can and you don't need any script do this. CSS3 Flexbox Layout, also known as Flexible Layout module provides some very interesting properties, one of which can reverse the order of HTML elements.

The Flexbox property

The property that I am going to use in my example here (to reverse the order of elements) is flex-direction. The values that you can use with this property are,

• column
• column-reverse
• row (this is default)
• row-reverse

For example,

<style>
    .myContainer
    {
        display: flex; 
        flex-direction: column-reverse; 
    }
</style>

Since I want to reverse the order of my HTML elements, I’ll focus on two values "flex-direction" property, that is, column-reverse and row-reverse.

I’ll use column-reverse when I want to show reverse order "vertically". I’ll use row-reverse when I want to show reverse order "horizontally".

Remember, it "does not" reverse the order based on numbers or alphabets. It will simply reverse the HTML elements order. Examples are necessary to understand this better.

Example

Let us assume, I have an HTML <table> listing birds in random order. It shows the list in a single row, horizontally. But I want display the list in reverse order like, "Bald Eagle", "Snail Kite" etc. Scroll down to see the "two" methods (properties) that I can use.

<table>
    <tr>
        <td>Rock Pigeon</td>
        <td>Canyon Towhee</td>
        <td>Black Vulture</td>
        <td>Snail Kite</td>
        <td>Bald Eagle</td>
    </tr>
</table>

1) Using column-reverse with flex-direction

In the first method I'll use property flex-direction with coloumn-reverse.

<table>
    <tr style="display: flex; 
        flex-direction: column-reverse;">

        <td>Rock Pigeon</td>
        <td>Canyon Towhee</td>
        <td>Black Vulture</td>
        <td>Snail Kite</td>
        <td>Bald Eagle</td>
    </tr>
</html>

Try it

The Output.

Rock Pigeon

Canyon Towhee

Black Vulture

Snail Kite

Bald Eagle

Note: I am using in-line CSS with the "style" attribute. You can create a CSS class and add it. The element becomes flexible by setting the display property as flex.

2) Using row-reverse with flex-direction

To show the reverse order "horizontally", you’ll have to use the row-reverse value of flex-direction property.

<html>
<body>
    <style>
        .birds {
            display: flex;
            flex-direction: row-reverse;  
        }
        .birds td {
            margin: 5px 2px;
            width: auto;
            border: solid 1px #DDD;
        }
    </style>

    <p>Showing table data in reverse order (horizontally) 
        using CSS flex-direction property!</p>

    <table>
        <tr class="birds">
            <td>Rock Pigeon</td>
            <td>Canyon Towhee</td>
            <td>Black Vulture</td>
            <td>Snail Kite</td>
            <td>Bald Eagle</td>
        </tr>
    </table>
</body>
</html>

Try it

The Output

Showing elements in reverse order, horizontally.

Rock Pigeon

Canyon Towhee

Black Vulture

Snail Kite

Bald Eagle

I created the class to align the td’s.

You can apply the flex-direction property to other elements for similar results. Here’s an example using <ul> and <li> elements. Reverse the order of the list and show the output vertically.

<ul style="display: flex; 
        flex-direction: column-reverse; 
        padding: 0;">
    <li>Rock Pigeon</li>
    <li>Canyon Towhee</li>
    <li>Black Vulture</li>
    <li>Snail Kite</li>
    <li>Bald Eagle</li>
</ul>

For web developers, this property is very useful. It reduces design time to less than half. You must try other properties in the Flexbox module. Another interesting property from the list is the flex-wrap. I’ll share an interesting example about flex-wrap later in my blog.

Thanks for reading. 🙂

← PreviousNext →