angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

Bootstrap 4.1 blog post grid with three columns, two breakpoints and re-ordering

Using ordering and push techniques you can create Bootstrap advanced grid layouts.

1 June 2019 Updated 29 August 2019
post main image

For this blog I wanted the blog post page to have three 'columns'. Why did I quote the word columns? Because what is a column on a large screen can be a row on a mobile device. Bootstrap uses containers, rows and columns. And of course, a Bootstrap column can show on the screen as a column or a row. Help!

When designing a layout we must not think about columns but about screen elements and how we want them on the screen on different devices. Being a developer I sit behind a monitor all day so I wanted to see three columns, sorry, screen elements:

A | B | C

A is the least important and smallest part, I do not have a particular content in mind for this at the moment. Initially it can be used as a spacer on large devices.
B is of course the most important part of the page, the content, the blog post. It is the biggest in width.
C is the next most important part containing, search, tags, selected information. It is the second biggest in width.

On mobile devices I wanted it to look like:

B
C
A

For devices between big and small, I wanted it to look like:

B | C
A

Now how do we do this? Being a Bootstrap noob I searched the web for copy-paste solutions but did not find anything close. Time to start reading. When researching you get new keywords you can use in your searches and I finally hit the post 'How to Reorder Columns with Bootstrap 4 Order Classes' and all the pieces fell into place. First, Bootstrap talks about devices so we stick to this terminology. Second, Bootstrap is mobile first so we should start with the smallest device. This is very important in understanding how we can change the order of the elements! 

We start with the extra small devices (xs) and small devices (sm), next are the medium devices (md) and finally we have the large devices (lg) and extra large devices (xl). I added classes elem-1-content, elem-2-information and elem-3-least-important to add some colors to make it easy to see what is happening.

For the smallest device we set the class to col-12, which makes every column the maximum width and results in three visible rows, content, information, least important:

<div class="container">
    <div class="row">

        <div class="col-12 elem-1-content">
            Content
        </div>

        <div class="col-12 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

For the medium device we set the class of the content column to md-9 and the class of the information column to md-3 putting them on the same row. The least important column still uses the maximum of 12, set for the smallest device, no need to add anything here:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Finally, for the large device we set the class of the content column to lg-8, the class of the information column to lg-3 and the class of the least important column lg-1. Now we need Bootstrap reordering to put the columns at the proper positions. Add order-lg-1 to the least important column to put it at the most left position, order-lg-12 to the information column to put it at the most right position and order-lg-10 to the content column to put it somewhere in between:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 col-lg-8 order-lg-10 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 col-lg-3 order-lg-12 elem-2-information">
            Information
        </div>

        <div class="col-12 col-lg-1 order-lg-1 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

The steps are shown below. To see them you must be behind a 'large' monitor and resize your browser:

Start with smallest device:
Content
Information
Least important
After adding md breakpoint:
Content
Information
Least important
After adding lg breakpoint:
Content
Information
Least important

Links / credits

Bootstrap Grid system Reordering
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

How to Reorder Columns with Bootstrap 4 Order Classes
https://bootstrapcreative.com/bootstrap-push-pull-column-ordering-tutorial/

Read more

Bootstrap

Leave a comment

Comment anonymously or log in to comment.

Comments

Leave a reply

Reply anonymously or log in to reply.