Change column break stacking order

[stevelucky-arc]

I’m having a couple issues with column stacking on mobile. When I have 2 columns and it gets scaled down for mobile, the columns will stack one on top of the other. It’s always the left column that gets stacked on top and the right column gets stacked underneath. Is there a way to make it so that the column on the RIGHT gets stacked on top?

Also, if I have a row with 2 columns and both columns are just text boxes, it won’t stack when scaled for mobile. It will just retain 2 columns and the text gets squeezed into really narrow columns. Why aren’t those columns stacking?

[Dagaloni]

Hi,

In another post I found this solution: https://xthemetips.com/swap-columns-mobile/416/

@media (min-width: 768px) {
  .x-section .x-container.swapcolumns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
  }
}

Put this code in your child’s theme css file or in the css section of the customizer. Then add swapcolumns to each row you want to swap the columns. Please not: you should order the columns so that they look correct on mobile view. This switches the columns in desktop view.

[thai]

@Dagaloni Thanks for sharing

@stevelucky-arc Let us know if the code works for you.

[stevelucky-arc]

Yep, that seemed to do it! Now I just need to figure out why some of my columns aren’t stacking at all. If it’s just text on both side, it just squishes together on mobile instead of stacking. If it’s an image in one of the columns, it will stack. Any idea why?

[rad]

Hi there,

It’s because of flex styling, it behaves like a table and a table cell will not stack to another cell. But that CSS should only take effect on tablet and above. Would you mind providing your site’s URL that has this issue?

Thanks!

[stevelucky-arc]

Sure thing. You can see what I mean with the first section of text on this page: http://theluckylabs.com/arcmedia/case-study-001-microsoft-treehouse/

[stevelucky-arc]

Thinking about it now, one of you guys had helped me with an issue where I occasionally wanted elements in certain columns to be centered vertically. I was told to add this to the page CSS:

.vertically-center {
display: flex;
align-items: center;
}

And then add “vertically-center” as a class to any of those columns where I wanted the items centered. This seems to be what is causing my issue. If I get rid of that CSS, the problem goes away. But then so does my column centering. How can I keep the column vertical centering when needed but not lose my column stacking on mobile?

[stevelucky-arc]

I think I may have figured this out. I believe if I change that CSS entry to:

@media (min-width: 768px) {
  .vertically-center {
display: flex;
align-items: center;
	}
}

That will allow the columns to stack on mobile but keep the vertical centering on desktop. The only problem with this is that there are certain section that I want to keep the vertical centering on mobile.

[paul.r]

Hi,

Yes that’s correct.

You can add another code.

@media (max-width: 768px) {
  .mobile-vertically-center {
display: flex;
align-items: center;
	}
}

Then add this class mobile-vertically-center to sections where you want to retian vertical centering.

Thanks