Reverse the Order of HTML Elements using CSS3 Flexbox

css

← PrevNext →

Tools you can use

Do you know you can reverse the order of HTML elements using only CSS? Yes, it is possible and you do not 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 that I am going to use in my example (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 am interested in reversing the order of my HTML elements, I’ll focus on two values from the above list, 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.

Now 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.

The Markup

I have an HTML <table> listing birds in random order. It shows the list in a single row, horizontally. This is default.

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

Using column-reverse with flex-direction

Now, I want to reverse the order (starting with Bald Eagle) and show the list vertically. I’ll use the property flex-direction with column-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

Here’s the Output.

Rock PigeonCanyon TowheeBlack VultureSnail KiteBald 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.

👉 Here's another useful flexbox example, I am sure you will like it. How to reorder P element (or any HTML element) using CSS3 order property.
Reorder P element using CSS

Using row-reverse with flex-direction

To show the reverse order horizontally, you’ll have to use the row-reverse value with the 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

Output

Showing elements in reverse order, horizontally.

Rock PigeonCanyon TowheeBlack VultureSnail KiteBald 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>

👉 You might also like this... How to reverse a string or a text in JavaScript using "while" loop

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 →