Column ordering classes in Bootstrap helps to change the order of our grid system based on different screen sizes eg: desktop, mobile, tablet, smartwatches. This makes the website more responsive for different screen sizes.
For example, let’s say we have 4 columns (V, X, Y, and Z). We want the appearance to be
-
On large screens:
V X Y Z
-
On small screens(mobile):
Y Z V X
We can easily change the order of built-in grid columns with push and pull column classes.
The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.
Syntax:
.col-md-pull-#
or
.col-md-push-#
Note: # is a number ranging from 1 to 12 (Grid system of bootstrap)
Column Re-ordering: Create your content mobile-first (code written for the mobile screen) because it is easier to push and pull columns on larger devices. Therefore, you should focus on your mobile ordering first, and then on larger screens like tablets or desktops.
Step by step guide for the implementation:
-
Step 1: Include Bootstrap CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css”>
-
Step 2: Add <div> tag in the HTML body with class row.
-
Step 3: Add <div> tag for different columns with .push , .pull classes and so on classes in the <body> tag.
Example 1:
<!DOCTYPE html> <html>
<head>
<link
rel="stylesheet"
href=
</head>
<body>
<div class="row">
<div class="well well-lg clearfix">
<div class="col-xs-12 col-md-4 col-md-push-4">
<div class="alert alert-success">2</div>
</div>
<div class="col-xs-6 col-md-4 col-md-pull-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="alert alert-warning">3</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html> <html>
<head>
<link
rel="stylesheet"
href=
</head>
<body>
<div class="row">
<div class="well well-lg clearfix">
<div class="col-xs-6 col-md-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-xs-6 col-md-4 col-md-push-4">
<div class="alert alert-warning">3</div>
</div>
<div class="col-xs-12 col-md-4 col-md-pull-4">
<div class="alert alert-success">2</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Conclusion: By using these procedure we can make our website responsive for different screen sizes and write mobile content.