Sometimes you might want to change the order of columns on your website depending on screen size, this can be done using Bootstrap’s push and pull classes. A great example of this, is if you want an image to the right and text to the left on a desktop, but want to swap these around on a mobile device.
Starting code for this tutorial
Start by creating 2 column’s inside of your the basic template we made in tutorial 3. I’ve created a smaller 4 column div on the left, and a larger 8 column div to the right.
<div class="container">
<div class="row">
<div class="col-md-4 bg-danger">
column 1
</div>
<div class="col-md-8 bg-success">
column 2
</div>
</div>
</div>
Changing column order with Push and Pull classes
We can change the order of these columns with Bootstraps Push and Pull classes,
.col-md-pull-* or col-md-push-*. The “*” would be the number of columns to push or pull the column by.
To swap these columns around, we need to push our first div over by 8 columns by adding the class
.col-md-push-8because the “column 2” is 8 columns in width. Then we need to pull “column 2” 4 columns to the left with .col-md-pull-4 to fill up the space left by column 1. This should evenly swap both columns on any medium sized devices or larger.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 bg-danger">
column 1
</div>
<div class="col-md-8 col-md-pull-4 bg-success">
column 2
</div>
</div>
</div>
Creating a background image
As a practical example of where this could be used in the real world, I created a background image using custom CSS. This isn’t 100% related to Bootstrap but it demonstrates a good use for the push and pull method shown above.
Adding a custom CSS file
Start by linking a custom CSS file to your web page. I created a file called “main.css” which I added to my CSS folder along with all the other Bootstrap css files.
<!-- This is my CSS file -->
<link rel="stylesheet" href="css/main.css">
Create a custom background image class
After creating my css file, I added the following class to my CSS file.
.bg-cover{
background:url(../images/your-image-name.ext);
height:300px;
background-size:cover;
}
Add the class to your column
Once the class was created, all I had to do was add it to the column where I wanted my image to be displayed. I also removed the Bootstrap background color contextual class.
<div class="col-md-4 col-md-push-8 bg-cover">
0 comments