Open In App

How to reorder div elements using CSS only ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can reorder HTML elements by using many methods in CSS. We use flexbox’s order property. Order property is used to change the visual order and not their logical order. Items in a container are sorted in ascending order value and then by their source code order.

Syntax:

Integer values

order: 1;
order: -1;

Global values

order: revert;
order: inherit;
order: unset;
order: initial;
order: revert-layer;

Note: Values represent the ordinal order.

Example 1: In the following code, the one with the highest value will be given first priority. It is not necessary to assign values sequentially.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Reorder elements</title>
    <style>
        #flex {
            display: flex;
            flex-direction: column;
        }
  
        #x {
            order: 2;
        }
  
        #y {
            order: 1;
        }
  
        #z {
            order: 3;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <h3>Ordering</h3>
    <div id="flex">
        <div id="x">X</div>
        <div id="y">Y</div>
        <div id="z">Z</div>
    </div>
</body>
  
</html>


Output:

 

If we assign the following values to the order property, the output would be the same as mentioned above. 

CSS




#x{
    order: 5;
}
#y{
    order: 3;
}
#z{
    order: 8;
}


Example 2: There are other methods using CSS. Given below are the methods mentioned to reorder the divs. The table-header-group behaves like <tbody> HTML elements. The table-footer-group behaves like <tfoot> HTML elements. The table behaves like HTML <table> elements. Accordingly, three divs are arranged.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Reordering Divs using CSS</title>
    <style>
        h1 {
            color: green;
        }
  
        #wrapper {
            display: table-footer-group;
        }
  
        #firstDiv {
            display: table-header-group;
        }
  
        #secondDiv {
            display: table;
        }
    </style>
</head>
  
<body>
    <h3>Ordering</h3>
    <div id="wrapper">
        <h1>Welcome</h1>
    </div>
    <div id="firstDiv">
        <h1>to</h1>
    </div>
    <div id="secondDiv">
        <h1>GeeksforGeeks</h1>
    </div>
</body>
  
</html>


Output: 

 

Example 3: CSS flex-flow property is used to display flexible items (in this case divs) in reverse order.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Reordering Divs using CSS</title>
      
    <style>
        .container {
            /* Setup Flexbox */
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            /* Reverse Column Order */
            -webkit-flex-flow: column-reverse;
            flex-flow: column-reverse;
        }
  
        .container>div {
            background: rgb(99, 199, 68);
            color: white;
        }
  
        .container>div:last-of-type {
            background: rgb(45, 71, 8);
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Ordering</h3>
    <div class="container">
        <div class="x">
            x
        </div>
        <div class="y">
            y
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 4: In this example, div with class wrapper is15px from the top while the other divs with class firstDiv and secondDiv are 50px and 0px from the top respectively. Thus, according to the distance from the top of the DOM, the ordering of the divs is performed as shown in the output.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Reordering Divs using CSS</title>
    <style>
        h1 {
            color: green;
        }
  
        .wrapper {
            position: relative;
            top: 15px
        }
  
        .firstDiv {
            position: absolute;
            height: 100px;
            top: 50px;
        }
  
        .secondDiv {
            position: absolute;
            height: 100px;
            top: 0px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Ordering</h3>
    <div class="wrapper">
        first
    </div>
    <div class="firstDiv">
        second
    </div>
    <div class="secondDiv">
        third
    </div>
</body>
  
</html>


Output:

 

Note: The order property will change the visual content of the code and DOM order. It will adversely affect the user experience. For example., users can experience wrong reading orders while using assistive technology such as screen readers available in browsers like Microsoft Edge. Thus, it should be avoided.



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads