how to swap columns on mobile

[Walker]

Hello Forum,

I tried to swap the order of two columns for the mobile device.

For better understanding. On the desktop I have on the left side a textfield and on the right side a carousel slider,
On mobile the textfield will appear on top of the carousel slider.
I want the textfield appear under the slider with out changing the order on the desktop version.
And in addition I want to do this only on certain project, not on all projects.

I tried to solve it with the following code:

.row._100vh {
width: 100%;
display: table !important;
}
.info-c1 {
display:table-footer-group;
}
.lay-carousel {
display:table-header-group;
}

I also tried to solve it with jquery, there I am kind of lost:

jQuery(document).ready(function(){
listenWidth( e ) {
if($(window).width()<900)
{
$(".info-c1").remove().insertAfter($(".lay-carousel"));
} else {
$(".info-c1").remove().insertBefore($(".lay-carousel"));
}
}

Importend: the text ist hidden, you have to click on the Button Info under the slider.
So when you click on the Info Button the text should appear under the slider...

Sorry, its kind of complicated.

would be nice to ge some help
Thanks

Walker

[arminunruh]

Hey Walker!

One solution would be to first layout your project so your columns have the right order when stacked on top of each other in the mobile view. (Left to right becomes top to bottom on the phone layout).

Once you did that, then you can use the x-offset functionality http://laytheme.com/documentation.html#elements-with-offsets to offset your elements in a way that they switch positions. Remember, you won't actually drag and drop around the elements to change their order, you will only use x-offsets to do that.

Because in the mobile view, x-offsets are not used, you will still have the logical order in mobile view.

I hope that helps!!

I think one day it would be useful if there was an option for lay theme where you have extra grids just for the phone version. Let's see

[Walker]

Armin, thank a lot,
your suggestion was brilliant,
the "very creative" not coding way.

Thank

walker