1. Home
  2. Css
  3. Flex order
#css#flex

Flex order lets you change the sequence of the page elements. The order attribute takes an integer to set the hierarchy.

<style>
    .flex-order{
        display: flex;
    }
    .flex-order-1{
        order: 1;
    }
    .flex-order-2{
        order: 2;
    }
    .flex-order-3{
        order: 3;
    }
    .flex-order span{
        border: 1px solid #4dc3a4;
        padding: 6px;
    }
</style>
<span class="flex-order">
    <span class="flex-order-3">Element 1</span>
    <span class="flex-order-2">Element 2</span>
    <span class="flex-order-1">Element 3</span>
</span>
Output:

Element 1 Element 2 Element 3

copy
Full Css cheatsheet
Sitemap Git repository