Archived topic
reverse column order on mobile and tablet
3 replies · Started by Heinrich on July 1, 2020
Hi,
I tried to modify the code from another support topic, so the columns swap at 1030px, but that doesn’t work.
@media (max-width: 1030) {
.reverse-mobile {
flex-direction: column-reverse;
}
}
Hi there,
You can do this with GenerateBlocks - for tablet at 1024px:
Select a grid item ( column ) then in the Settings sidebar, select Tablet and under Layout you will see an Order field.
You can now set a specific order for your columns on mobile.
For example add 2 to your first (left hand ) column and then 1 to your second (right hand ) column to reverse the order on tablet ( or mobile ).
If you need that specific 1030px breakpoint then make sure you have the reverse-mobile class on the Grid Block not the Container Block.
Currently your class is on the Container Block so the CSS would be this:
@media(max-width: 1030px) {
.reverse-mobile .gb-grid-wrapper {
flex-direction: row-reverse;
}
}Great thanks!
You're welcome
