How to Reorder Columns with Bootstrap 4 Order Classes

  • read
  • Add to Flipboard Magazine.

bootstrap push pull column ordering

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one it finds under the .row class.

change column order bootstrap 4

Remember to Write Your Code “Mobile First”

What is mobile first? It basically means the HTML and CSS you first send to the browser are for mobile devices. So you should write your HTML markup in the order you want it to appear on mobile. Then use the order classes to rearrange things on larger devices like a forklift moves boxes around.

Below is the result of the code above.

A two column grid with the images 100% width of the column. Since each column has a class .col-sm-6, each column will be 100% width on mobile.

natural bootstrap column ordering

Now, how would you make the B column swap positions with A column on mobile?

So on mobile it will be BA and on everything else it will be AB.

To do this, you would need to set the source code to be in the order you want it to be on mobile. Then add the order classes to the columns specifying the order at the breakpoint you choose. In our case we want SM and up. Using Bootstrap’s order classes you can essentially move columns around like a forklift.

.order-sm-12

Add this class to the first column to push it to the last position to the right. Remember Bootstrap is based on a 12 point grid system.

.order-sm-1

Now add this class to the second column to move the column to the left starting position.

responsive column ordering

Here is the final result

View Code Demo

How does Bootstrap 4 Order (push pull) work?

Bootstrap 4 uses CSS flexbox for the grid system. So the column ordering essentially applies an order property to the flex item you are moving. If you are new to flexbox, I have a flexbox cheat sheet you may find useful.

Advertise Here

 

Conclusion

The most important thing to remember is the Bootstrap CSS Framework is mobile first. Write your markup how you want it to be displayed on mobile devices.

Then apply the .order-* classes to reorder things at different breakpoints. Always keeping in mind your classes need to add up to 12 columns.

bootstrap 4 books

Learn Bootstrap 4 Fast - Books

Learn More

Advertise Here

Written by: Jacob Lett - Jacob is an experienced website designer and developer who specializes in building HubSpot CMS themes. He helps Industrial companies optimize and leverage their website for awareness, lead generation, and branding.
Category: Tutorials
Tags: ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

bootstrap 4 books

Want a Bootstrap Reference Book?

Learn More

Advertise Here