Reverse Column Stacking Order for Mobile

Aloha Nikko,

This ends up being a really common requirement for many of our projects, and it would be great if this were handled more gracefully in the theme. Duplicating sections and then hiding them on various screen sizes is not ideal for a variety of reasons including web accessibility. We do not want people using screen readers to get a bunch of duplicate content.

So here is our solution for alternating the stacking order of one-half blocks within a color section.

1) Arrange the one-half blocks in the correct order that you want them to stack on mobile, which will be opposite of how they appear on desktop.
2) Add a class called switcharoo to the Color Section.
3) Add the css code below wherever you make your CSS edits. You may need to remove the +30px if you are not using Space Between Columns.

@media screen and ( min-width: 768px ) {
.switcharoo .av_one_half.avia-builder-el-first {
left: calc(50% + 30px);
}
.switcharoo .av_one_half.avia-builder-el-last {
right: calc(50% + 30px);
}
}

Regards,
David Fry
Tanuki Interactive

Hello, this post is close to a problem I am working on. I sorely miss not being able to manage columns with something like Bootstrap. In a template I’m building,
[ 1/3 column A ] [ 2/3 column B ]

I want to reorder in mobile so I get this outcome:
[ 1/1 column B ]
[ 1/1 column A ]
In order to rearrange with Flexbox, I’d need to have a row container. I can’t figure out how to get that. I’m not able to add an outer row to add inner columns like you can do with Visual Composer or more broadly, Bootstrap.

I want to use this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items where the blocks exist in a section or row and I reverse direction on mobile.

But I can’t seem to find how to contain the two. I tried the switcheroo script, I’ll study that calc, however it is not working for me.

Thanks.

Hi Nikko,
Thanks for jumping in.

This is the current page. https://plaid.flywheelstaging.com/academics/

Below is a link to a design showing the desktop vs mobile layout. I apologize for not being more knowledgeable about Enfold. I didn’t know the version was out of date, I will add that to my list of things to check. Since reporting this problem, I’ve had other issues with your page tools; now clearly the version is responsible. I’m so glad you pointed that out. I love to learn how to get better mobile experience out of layouts.

https://snag.gy/YWw7NJ.jpg

OK; I thought I did.
New post title is: ‘Mobile stacking order for uneven width columns‘

My solution was to combine DavidKFry’s and Nikko’s solutions.

Put your columns in a Color Section. Give that Color Section a class of .flip-mobile.
Set first column in each row to be “Equal Height”. Then add this css.

@media only screen and (max-width: 767px) {
	.flip-mobile .flex_column_table {
		display:flex !important;
		flex-direction:column-reverse;
	}
	.flip-mobile .flex_column_table .flex_column {
		flex:0 0 auto;
	}
}

Be sure to use a separate Color Section for each group you want to flip. If you do your entire page in one Color Section it will show the bottom at the top.

I would like to see enfold use Flex for those equal columns, instead of the display: table and display: table-cell. But I know that wasn’t always supported.
Hope it helps others.

Guenni007, when are these guys gonna start paying you ;)