Adjust stacking on mobile (Text before image)

Site URL: https://smilodon-lilac-yyrs.squarespace.com

Hi, I am in need of some help to get modules stacking correctly on mobile. I am currently using an alternating module pattern on desktop - left (text) right (image) followed by left (image) right (text).

With sqaurepace automatically stacking modules on the left above those on the right info the info does not display properly on mobile (i want to achieve text then image on all modules). 

I have tried the below css but have not had any luck. Note modules that need to stack correctly are on the 'See Inside' and 'About' pages. 

@media screen and (max-width:991px) {
#page-section-5e8004c8799501307383fe45.sqs-row {
   display: -webkit-flex !important;
   -webkit-flex-direction: column-reverse;
   display: flex;
   flex-direction: column-reverse;
}
}

Any assistance is appreciated - note section ID in the above css is the "our programs" module on the 'See Inside' page. 

@bsull Please provide the specific link you're wanting to do this on. That would help.

But actually I think you don't need any CSS. If you're just building this with text block and an image block sitting side by side, just make sure the Image block is floated to either the right or left of the image block. Then the image will always go to the top with a mobile layout.

I've done this on the example site here. https://unlikelyit.com/testing

If you don't know how to float a block on an text block, then just watch this video: 

Hi bsull,

I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions.

Here's what worked for me:

@media only screen and (max-width: 640px) {

section[data-section-id="insertsectionIDnumberhere"] .sqs-row {
   display: -webkit-flex !important;
   -webkit-flex-direction: column-reverse;
   display: flex;
   flex-direction: column-reverse;
}
}

The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!

Thanks @HaleyWard - clutch answer on this one I spent the whole day working through my own and came very close to what you had but yours did the trick. Appreciate the help here!

On 8/13/2020 at 6:03 AM, HaleyWard said:

Hi bsull,

I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions.

Here's what worked for me:

@media only screen and (max-width: 640px) {

section[data-section-id="insertsectionIDnumberhere"] .sqs-row {
   display: -webkit-flex !important;
   -webkit-flex-direction: column-reverse;
   display: flex;
   flex-direction: column-reverse;
}
}

The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!

THANK YOU!