Bootstrap 5 Columns Reordering Order Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object Model.
Bootstrap 5 Columns Reordering Order Classes:
- order-*: This class is used to set the visual order of columns in a row.
- order-**-*: This class sets the visual order of columns for various screen sizes in a row.
- order-first: This class is used to forcefully set the order of a column to the first in the row.
- order-last: This class is used to forcefully set the order of a column to the last in the row.
Note: * can be a number from 0-5 and ** replace the screen size like "sm", "md", "lg", "xl", "xxl".
Syntax:
<div class="row">
<div class="col order-3">...</div>
...
</div>
Example 1: In this example, we used the order classes to change the visual orders of the columns in a row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Columns Reordering Order classes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
<!-- Bootstrap Javascript -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap 5 Columns Reordering Order classes
</strong>
</div>
<div class="row w-50 mt-4">
<div class="col order-3 border text-bg-primary">
Position in DOM: First
</div>
<div class="col order-0 border text-bg-primary">
Position in DOM: Second
</div>
<div class="col order-5 border text-bg-primary">
Position in DOM: Third
</div>
<div class="col order-4 border text-bg-primary">
Position in DOM: Fourth
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we used the order-first and order-last classes to set the first and last columns in the row forcefully.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Columns Reordering Order classes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
<!-- Bootstrap Javascript -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap 5 Columns Reordering Order classes
</strong>
</div>
<div class="row w-50 mt-4">
<div class="col order-3 border
text-bg-primary">
order-3 class
</div>
<div class="col order-last border
text-bg-danger">
Order-last class
</div>
<div class="col order-0 border
text-bg-primary">
Order-0 class
</div>
<div class="col order-5 border
text-bg-primary">
Order-5 class
</div>
<div class="col order-first border
text-bg-danger">
Order-first class
</div>
<div class="col order-4 border
text-bg-primary">
Order-4 class
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/layout/columns/#order-classes