Switch Columns On Mobile Devices

While working with X, sometimes we have a layout with this scenario:

Text left | Image right
Image left | Text right

Things are fine until we go mobile. Then the layout goes

“Text | Image | Image | Text”.
And we want it
“Text | Image | Text | Image”.

While it is entirely possible to make double sections/rows and hide/show them as needed, that involves having two sets of same text. That is bad because it makes updating the text harder, and also adds extra code to the page.

It can be solved with JavaScript, but I found the CSS solution to be more elegant. I’ll explain the two CSS options, but those rely on the structure of Cornerstone that may change in time. If you want a more time-proof solution, you can go with option three that is a tiny bit less elegant.

Edit
A newer way came along, to simply add class “right” to the left column of the row which we want to be reversed. it goes with this CSS in the Customizer: .x-column.right {margin-right: 0 !important;}. If this method withstands all testings, I’ll update the article. You can read more about it here: https://xthemetips.com/swap-columns-mobile/416/

X update to 4.4.0. made some layout changes, so this solution won’t work on older versions:

X-theme 4.4.0. and above

1. create a helper class:

@media (min-width: 768px){
.scol {
left: 52%;right: auto;
position:absolute;
}}

Place this CSS in the Cornerstone CSS editor if you use it on one page, or in the style.css file in the Child theme, if you use it site-wide.

“scol” means “Switch columns”. You can name it as you wish, though.

2. Create a row with two columns: text left, image right.
3. Create the second row with two columns, ALSO text left, image right. (This is the one we want to display in reverse with CSS).
4. In the second row, simply give the class scol to the left column (not to the text element). This will move the left column to the right, and force the right column to move to the left.

Note that the column with the scol class can now be found on the right in the Live view, while in Skeleton mode it is still on the left.

Also note that, if the columns don’t align to the rest of the content perfectly, you may need to tweak the percentage  in the CSS helper class, until you get it right.

Also, if you have 1/3 – 2/3 or other layouts in rows, you can adjust the percentages until you match your layout. For example, a 1/3 – 2/3 layout is around 70%.
If you use more layouts on the site, you can create separate helper classes for different layouts.

X-theme before version 4.4.0.

For those who need a working solution for the previous versions of X (you should really update asap :), here it is:

1. create two helper classes. Place them in the Customizer or style.css in the Child theme.

@media (min-width: 768px){
.scl {
left: 52%;
right: auto;
margin-top:-11px;
}
.scr {
right: 52%;
left: auto;
}}

The meaning of the helper classes are “Switch Columns Left” and “Switch Columns Right”.

2. Create a row with two columns: text left, image right.
3. Create the second row with two columns, ALSO text left, image right. (This is the one we want to display in reverse with css).
4. In the second row, give the class scl to the left column (not to the text element), and the class scr to the right column (not the image element).

That’s it!

Please keep in mind that this is the unofficial solution, so if Cornerstone receives some new layout updates like 4.4.0., this may not work as expected anymore.

Oh, and don’t give the position:absolute; to the right column. 🙂

Non-CSS solution

To fully understand this solution, see this image. Just go to Skeleton mode and replicate the setup in ten seconds. (Click on appropriate column/element in skeleton mode and add the classes as shown in orange color). The explanation may sound more complicated than that, but here it is:


1. Create a section
2. Create two rows in that section (Also can work with two sections, but this is better for duplicating purposes)
3. Create two column layout in both rows
4. First row: Text left | Image right
5. Next row: Image left | Text right
6. Row 2, Left column: Hide the column up to 767 px with cornerstone classes x-hide-xs and x-hide-sm (Not the image)
7. Row 2, column 2: duplicate the image from the left column, and place it below the text in the right column
8. Hide the extra image (Not the column) on desktop, from 768px up, with classes: x-hide-xl x-hide-lg x-hide-md

About the Author

Miroslav Meduric

Miroslav is a founder of WPUsability, a web dev company focused on Conversion design, SEO, UX and Conversion optimization.

Liked it? Share it!

Comments

  1. Note that the column with the scol class can now be found on the right in the Live view, while in Skeleton mode it is still on the left.

    Also note that, if the columns don’t align to the rest of the content perfectly, you may need to tweak the percentage in the CSS helper class, until you get it right.

    In desktop mode it still has image right in the second column after I save and preview it. So I am not sure this is working. I have latest theme

    1. Author

      Hi s_mocko! I have just tested with latest X (4.4.1) and Cornerstone (1.2.3.). It works perfectly.
      Make sure your second column has also text on the left, and you give the scol class to the Column that holds the text element, not to the text element.

  2. That is correct, I have the left text column with text and a custom headline, The scol is in the column class, not the text. Maybe I will have tech support look at it. But It seems everything is correct. Not sure what I could be missed.

    Thank You

  3. Hi,

    I have the following problem with the right display of my columns on mobile:
    I created a row with two columns and everything is fine on the PC:

    Picture 1 left | Picture 2 right
    Picture 3 left | Picture 4 right
    Picture 5 left | Picture 6 right
    and so on….

    But as soon as I open it mobile, the display is following:

    Picture 1
    Picture 3
    Picture 5
    Picture 2
    Picture 4
    Picture 6

    Instead of I want it to be in the right order:
    Picture 1
    Picture 2
    Picture 3
    Picture 4
    Picture 5
    Picture 6

    Can you please give me some advice what can be wrong?

    Many thanks!
    Stasia

    1. Author

      Hi Stasia,

      It looks like your images are not placed within individual columns.

      Try placing two columns in the row, then create a new row and place two columns there, and then create a third row and place the last tow pictures in their columns.
      All this should be in the same section.

      Additionally, you can give a class center-list to each image, to have them nicely centered across devices.

      Hope this helps!

  4. It works but the thing I couldn’t fix is when I am resizing the window on desktop, the text overflows to the next section and their is a overlapping text because position is absolute.

    What is the way to fix it?

Leave a Reply to Sean Scott Cancel reply