Modern web design must look good on, and have a content flow, relevant to a great many device widths, from my cinema sized thunderbolt desktop display, to the small mobile screens. A web designer’s constant challenge is to keep the DOM in mind when laying out the code, so that your structure looks good without css, and then laying css on top to style it according to the needs of the screen. A common design practice of mine to create visual interest in a page is to break up the content into chunks, then to stagger those chunks.

Here’s an example from my client, Protectors of Equality in Government. I use staggering to break up what would otherwise just be a visually long column of text. We generally want to avoid that, so I work to make both paragraphs and text lines short [see this article about Optimal Line Lengths]. If the line length is too long, some people will not even start to read the content, because the length of it looks intimidating. Additionally, the eyes and reading habits of the common consumer of content on the internet often jumps around. Thus, this format is more likely to hold their attention for longer as it’s based on how their already consuming content.

Figure 3

However, problems occur then once the screen size is reduced to that of a mobile phone. As you can see in Figure 3, if we layout the items in the DOM how we want them to appear in a desktop, then we’ll have images stacked on top of each other, and blocks of content stacked on top of each other. It’ll be a much better experience to also have this content broken up bit by bit.

To address this, we take advantage of utility classes built into modern responsive grid system, such as Bootstrap or Foundation.The grid system provides a great tool to scaffold and build out any number of projects. A lesser known grid feature, the grid column ordering classes, comes to our rescue here. It is a simple feature, understated on their docs, but very powerful in the right scenarios.

What Is Column Ordering?

Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.

The Push and Pull Classes of Bootstrap

The classes are used along with the Bootstrap grid classes of .col-xs-#.col-sm-#.col-md-#, and .col-lg-#.

The push and pull classes applied to the Bootstrap grid are .col-xs-push-# or .col-xs-pull-#. That also works with smmd, and lg.

The push class will move columns to the right while the pull class will move columns to the left.

How to use Push and Pull Classes within Visual Composer

In order to build websites that my clients can edit with ease, I’ve been using the market dominating WPBakery Page Builder (previously known as Visual Composer, and referenced as VC for the reset of this article) for many of my WordPress projects.

VC incorporates much of Bootstrap into it’s framework. In order to avoid theme conflicts, they’ve often prepended vc_ to the bootstrap classes. For the column ordering, it looks like vc_col-sm-push-6 or vc_col-sm-pull-6.

Let’s look at how this is applied within one of my projects:

Figure 4

In Figure 4, Column A, our image, is 5 columns wide, and so is defined as a 5/12. Column B is defined as a 7/12 width. Thus we need to apply the class of vc_col-sm-push-7 to our Column A image so it bumps over to the right, and the class of vc_col-sm-pull-5 to our text-containing column A, so that it floats to the right on desktop screens, but resumes it’s original position when viewed on mobile devices as you can see in Figure 5.

Figure 5, with appropriate DOM sorting and usage of Push Pull classes for layout.

This way the text comes before the image, as it does in the preceding paragraph to it. If you’ve found this deep dive useful, please leave me a comment to know that I’ve helped you make your work look better across all devices.

7 Comments

  1. What if you have a mobile/vc setup like this:

    5/12(image) – 1/12(empty) – 5/12(text) – 1/12(empty)

    On desktop you want it to display as:

    1/12(empty) – 5/12(text) – 1/12(empty) – 5/12(image)

    I did for each mobile/vc column in order:

    vc_col-sm-push-7(image) – vc_col-sm-push-1(empty) – vc_col-sm-pull-5(text) – vc_col-sm-pull-11(empty)

    However the margins are a tad off. The image doesn’t push all the way to the right of the grid size, and the text doesn’t push left as far as it needs to. The two 1/12 columns seem either too large or too small.

    I attached a photo. I think it has something to do with the left-margins placed on each element/column by default. And the fact that it’s simply moving the columns with left/right css percentages.

    https://imgur.com/NgNFNgQ

    In the photo you will see the in the middle the sm-push section, right below is the section made in visual composer (obviously doesn’t stack right in mobile), and the top one is just the offset version (not the same img/txt) that is part of the site layout.

  2. I appreciate this article so much. Somehow I had not realized that VC was built on Bootstrap and I have been trying to wrangle with this column stacking issue for a while over a few projects. Thank you for sharing this!

    • I’m so happy you found your way to my little blog. I tried to optimize this article so it’d show up for people having the same frustrations I had before I dug into the codebase of VC and realized there were inclusions of the Bootstrap framework. Feel free to share along your finished work that this helped with.

  3. I was really happy to find this article. I have a row set up with 6 alternating design columns. I want 3 columns on desktop, 2 columns on tablet, and 1 column on mobile. When I tried the push/pull CSS, it works great, but then the 2 columns that I have that CSS applied to do not display on desktop for some reason. So I’m not able to use that, unfortunately. Not sure why that would affect the desktop display at all. Any ideas?

    • Hi Steve, You probably figured this out already by now, but I’m happy to look at the code if you’ve got a published demo to show.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.