Swap Columns on Mobile

How can I swap columns on mobile? That question has been asked so many times, but sadly the answer has never been consistent. I’m going to show you two ways to achieve the effect of swapping columns on mobile with this tip.

How I swap columns.

I want to preface that there are a few methods to achieve this, and no one way can be called “more correct” than the other. Ever since I originally posted the CSS needed to do this in the X Users group, X has changed and the code no longer works as intended. This article is meant to show you the two ways I now swap columns. One I believe to be bulletproof and timeless. The other makes use of classes already defined in X.

Let’s get started.

Assuming the layout you want has alternating image block and text blocks, the smart way to build your section is to place all the images in the left columns, and all the text in the right columns. Here is an example:

You might notice that it’s set up for a proper display on mobile already. That’s because I feel swapping the columns on desktop is the better approach. Perhaps I should have called this article Swap Columns on Desktop.

After that’s done, you need to decide whether you are using marginless columns or the default separated columns with margins.

Marginless.

This is my go-to layout for this effect. It makes use of flexbox layout and works across all modern browsers. For this, we simply give a custom class of swapcolumns to each row we want the effect on. Then set this custom CSS in our Customizer:

The code you see here sets the row up to display: flex, and makes use of the flex-direction attribute to literally reverse order the columns in the browser display. Wrapped in a media query, it only applies the effect in resolutions larger than our X Theme column break point. And since we originally build the rows to all have the images on the left and the text on the right, the mobile display is perfect.

The margin method.

The second method applies when you do not use marginless columns. Although flex could be made to work, X makes use of floats on desktop resolutions, so it makes sense to use those to our advantage. To implement this, simply add the class right to the individual columns you want to swap. In our example, you would apply the class to the column containing the second image. This class is predefined in X, so it requires no additional CSS!

There is, however, one small hiccup; the margin that separated our columns initially is now applied to the wrong column. To fix that, use this custom CSS:

.x-column.right {
  margin-right: 0;
}

That’s it. Easy, eh?