How can I change the order of photos and text in Squarespace so it views one way on desktop, but reorders on mobile? I've seen similar questions to this so I've tried my own code but it's not changing anything.
I have index pages that balance the layout of the one above it on desktop (section1 = image on left/text on right, section2 = text on left/image on right)
On mobile the flow is backward (section1 = image on top/text on bottom, section2 = text on top/image on bottom).
webpage is: www.northcountryarmory.com/fort-knox
This is indeed a rather common need on Squarespace sites (and has been for years). Unfortunately, Squarespace doesn't currently offer any mobile-specific block layout options.
Furthermore, each site's layout is different enough that it makes writing a universal bit of CSS difficult. It is a case-by-case basis.
In your case, you can target a specific page (via the collection id on the body element) and then target every evenly-numbered index-page section. Note that targeting in that way will only affect that page, and only the index sections on that page.
Insert the following LESS CSS via the CSS Editor / Custom CSS:
@media screen and (max-width: 640px) {
#collection-5db8b183ea3e1a49745ba89a .Index-page:nth-child(even) {
.sqs-row {
display: table;
}
.sqs-col-6:last-child {
display: table-header-group;
}
}
}
The above doesn't use flexbox, but uses CSS tables instead. In your case, that requires less code and will be more broadly compatible. Flexbox is another way to do it, though. To use flexbox, set the parent element to display:flex and then use the order CSS property on the children within the context of a media query, similar to the above.
For others who may read this, you'll likely need to ask a new question for your specific site/context (and be sure to mention the code you've tried).