The order class in Bootstrap allows you to control the order of columns regardless of their placement in the HTML. This can be really useful for responsive design when you want to rearrange columns for different screen sizes.
Here’s an example of a simple two-column layout without any ordering:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before Bootstrap Order Class</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h2>Column 1</h2>
<p>This is the first column. It appears first in all screen sizes.</p>
</div>
<div class="col-12 col-md-6">
<h2>Column 2</h2>
<p>This is the second column. It appears second in all screen sizes.</p>
</div>
</div>
</div>
</body>
</html>In this example, Column 1 will always appear before Column 2, even on mobile devices.
Now, let’s change the order for mobile devices so Column 2 appears first on small screens but still appears second on larger screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>After Bootstrap Order Class</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 order-md-2">
<h2>Column 1</h2>
<p>This is the first column. It appears second on larger screens.</p>
</div>
<div class="col-12 col-md-6 order-md-1">
<h2>Column 2</h2>
<p>This is the second column. It appears first on larger screens.</p>
</div>
</div>
</div>
</body>
</html>order-md-2means that Column 1 will appear second on medium-sized screens and larger (like desktops).order-md-1means that Column 2 will appear first on medium-sized screens and larger.
On smaller screens (mobile), Column 1 will still appear first, but once the screen is medium or larger, they switch places.
This flexibility allows you to control the layout’s appearance based on the device size!