Responsive Design for Mobile - CSS to Change Order of Element Rendering on Small Screens

tpkeeney

Does anyone have any experience using CSS to change the order of how elements are rendered on mobile? I have a footer with 5 columns (Columns 0 and 4 being spacers) and 3 rows in each column. Web renders correctly, but on mobile, the order of rendering of all elements in Row 1 followed by all elements in Row 2, etc. creates a vertical display that makes no sense.

I’m familiar with the “@media screen and (max-width: 767px)” syntax to define when to have the adjustments be made, but after several attempts to reorder using various classes, I can’t get anything to work. The following is an example of the type of code I have been trying:
.sm-page-layout-region-footer .sm-page-layout-column[data-layout-column="1"] {
order: 1;
}
.sm-page-layout-region-footer .sm-page-layout-column[data-layout-column="1"] [data-layout-row="D"],
.sm-page-layout-region-footer .sm-page-layout-column[data-layout-column="1"] [data-layout-row="Tm"],
.sm-page-layout-region-footer .sm-page-layout-column[data-layout-column="1"] [data-layout-row="j"] {
order: 1;
}

Can anyone who has tackled something similar offer help?
Tim

Hikin' Mike

If you're talking about your home page, I suggest taking a look at this as a foundation instead of you current layout: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Services-Page-with-Image-Description-and-More

tpkeeney

@Hikin' Mike Thank you so much! This is exactly responsive behavior I was looking for and I think gives me a great start to work with. I’m able to put that HTML in my footer so it appears on every page. Now I just need to work on the formatting a little.
Tim