Bootstrap 5 Flex Order

Last Updated : 05 Dec, 2022

Bootstrap 5 Flex order class can be used to set the order of the flex items inside the flex irrespective of their position in the DOM. We have to select options to make an item first or the last remaining items will follow the order. The order takes integer values from 0-5 and some custom values are also used.

FBootstrap 5 Flex Order Classes: The ‘*‘ can be replaced by sm/md/lg/xl/xxl. ‘**‘ can be replaced by 0, 1, 2, 3, 4, 5, first, last

order-*-**: This class is used to set the order of a flex item to the * index.

Syntax:

<div class="d-flex">
    <div class="order-*-** ">
        ...
    </div>
</div>

Example 1: In this example, we set the order of flex items using flex order classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="container text-center "> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h5> 
            Bootstrap 5 flex order 
        </h5> 
    </div> 
    <div class="d-flex flex-nowrap justify-content-center"> 
        <div class="order-3 p-2 border bg-light"> 
            First flex 
        </div> 
        <div class="order-2 p-2 border bg-light"> 
            Second flex 
        </div> 
        <div class="order-1 p-2 border bg-light"> 
            Third flex 
        </div> 
        <div class="order-4 p-2 border bg-light"> 
            fourth flex 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we set the flex order of a specific flex item to achieve this effect on medium screen size.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="container text-center "> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h5> 
            Bootstrap 5 flex order 
        </h5> 
    </div> 
    <div class="d-flex flex-nowrap justify-content-center"> 
        <div class="order-3 order-md-0 p-2 border bg-warning text-white"> 
            First flex 
        </div> 
        <div class="order-2 order-md-4 p-2 border bg-danger text-white"> 
            Second flex 
        </div> 
        <div class="order-1 order-md-3 p-2 border bg-success text-white"> 
            Third flex 
        </div> 
        <div class="order-4 order-md-1 p-2 border bg-info text-white"> 
            Fourth flex 
        </div> 
    </div> 
</body> 
</html> 