Bootstrap 5 Columns Reordering

Last Updated : 17 Jan, 2023

Bootstrap 5 Columns Reordering holds the feature of manipulation of column order visually and offsets grid columns. Order class is used to do the order change and offsetting is used to set the offset on the grid column.

Order classes: Order classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object Model.
Offsetting classes: Offset classes are used to give some offset to the column. The offset class sets the left margin of the column they are applied to the total width of the offset columns.

Example 1: In this example, we will see order class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CDN-->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>
 
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks </h1>
    <h3>Bootstrap5 Grid system Reordering</h3>
    <div class="row w-50 mt-4">
        <div class="col order-3 border bg-primary">
            GFG First
        </div>
        <div class="col order-0 border bg-secondary">
            GFG Second
        </div>
        <div class="col order-5 border bg-danger">
            GFG Third
        </div>
        <div class="col order-4 border bg-warning">
            GFG Fourth
        </div>
    </div>
</body>
 
</html>

Output:

Bookstrap 5 Columns Reordering

Example 2: In this example, we will see the offset class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CDN-->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>
 
<body class="container m-2">
    <h1 class="text-success"> GeeksforGeeks </h1>
    <h3>Bootstrap5 Grid system Reordering</h3>
 
    <div class="row mt-4 border border-success">
        <div class="col-4 offset-lg-4 offset-md-0 
            offset-sm-2 border bg-info">
            GFG 1 Classes
        </div>
        <div class="col-4 border bg-secondary">
            GFG No offset
        </div>
    </div>   
</body>
 
</html>