X Theme & Pro Theme

Swap Columns on Mobile

X Theme & Pro Theme17 Comments

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:

Swap columns row setup

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.


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?


Like what you see? Then get it in your inbox.

  • This field is for validation purposes and should be left unchanged.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Conor Seed

Quick question: the following css has the same effect using flexbox and is much more succinct, but my guess is that it probably runs into compatibility issues otherwise you probably would be using it already. You would design text left, image right for desktop and it would switch the order on mobile.

What are your thoughts?

@media(max-width: 769px){
display: flex;
flex-direction: column-reverse;

Roy Anger

Hey Conor,

I will Michael to test this and decide to include it in his piece. That said, your CSS actually needs to look like the following for compatibility:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

Michael Bourne

Conor, great question. I got in the habit of using order in the past due to a few minor quirks with flex-direction in certain scenarios, such as specified min-height or RTL text. It also gave me more granular control over my columsn when I used more than 2.

In this context however, it would be cleaner to row-reverse the container on desktop (it is still a mobile-first oriented layout). So good call on the direction. I’ll double check the compatibility and update the article.


Oh snap! This is great Michael. *Saved to evernote*

Alo Lätt

Quick question though. Do I HAVE to use columns with margins to use the .right helper class? It doesn’t seem to work for me currently.

Manny Costales

This CSS class should be implemented in the original css for X 😉
Thanks buddy! You rock!


Hi, I can’t seem to get this to work with either method. I’ve applied it to section02 and section04 underneath the hero slider. Any ideas?

This is the page: http://s20880.p20.sites.pressdns.com/comppracticemanagement/

Ed Mackintosh

Thanks for looking Michael. I did originally copy your css correctly, which didn’t work. then tried a different path which also didn’t work. Now I’ve re-put in your code and it now works. Which is great. Not sure what was different. But Thanks. All good now. 🙂

Kirk Williams

Thank you Michael! “Method 1” is working for me, however I’ve encountered a unique issue I’m hoping you may be able to offer your expertise on… On the page I’m testing on (http://www.keystonestateleague.com), I am able to swap the column order, however in desktop view, the contents of my column are not visible. I am using an additional CSS class (“.ksl-col”) on that column to add a background layer; I suspect this is causing the display issue, but I can’t figure out what is causing it to not display on desktop. The “.ksl-col” css is: .ksl-col{ background-image:url(“”); background-size:120%; background-repeat:no-repeat; z-index:-1;… Read more »


Worked for me! Thank you.


Thanks for the tips ! How do the second method can be applied only on mobile tho ?


If you want to vertical-align in the middle the content of the columns, add this line of code:
align-items: center;


if only this worked on IE you would have made my life a million times easier – but sadly not – so back to duplicating rows and hiding for desktop/mobile it is 😉