1. Home
  2. Knowledge Base
  3. Uncategorized
  4. Change Row Columns Float Direction for Mobile Devices

Change Row Columns Float Direction for Mobile Devices

If you have rows on your site with multiple columns, and you would like to change the direction of how those show up on mobile devices, you can reverse the float direction by using the following CSS. 

Please go to “Row Options” by clicking the pencil icon next to “add new row”

Then for the custom CSS class use “floatdifferent”

If you already have a CSS class there, just use a space between each class so you can have more than 1. Then go to “Page Settings > Other scripts > Custom CSS” and add the CSS code below to make it reverse the direction the columns show up on mobile:

@media only screen and (max-width: 767px) {
.floatdifferent .fixed-width {
display: flex!important;
flex-direction: column-reverse!important;
}
}

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support