Reordering Squarespace Index Image Blocks with CSS?

I've seen this question a few times, but I haven't been able to re-purpose the code posted.

I'm trying to change the order of photo grids in Squarespace so it shows one way on desktop, but reorders on mobile.

I have index gallery pages that alternate image layouts (for full-bleed, I've got two images side by side, with text on one). I've altered the order on desktop so section1 = image on left, image with text on right, section2 = image with text on left, image on right (total of 4 sections).

On mobile view the flow is stacking the images, so I get image/image with text/image with text/image/image.

I there change the view order in each section?

webpage is: https://jaguar-dog-jzz6.squarespace.com/

Solution

The following CSS, added via the CSS Editor will do what you need.

@media screen and (max-width: 640px) {
  #new-gallery-1 .Index-gallery-inner {
    display: flex;
    flex-direction: column;
  }
  #new-gallery-1 .Index-gallery-item:nth-child(2) {
    order: -1;
  }
  #new-gallery-2 .Index-gallery-inner {
    display: flex;
    flex-direction: column;
  }
  #new-gallery-2 .Index-gallery-item:nth-child(2) {
    order: -1;
  }
}

Or, if you prefer the LESS CSS, prefixed version:

@media screen and (max-width: 640px) {
  #new-gallery-1, #new-gallery-2 {
    .Index-gallery-inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .Index-gallery-item:nth-child(2) {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1;
    }
  }
}

Use only one of the above snippets. What they do is use flexbox in order to adjust the displayed order of the elements at widths less than 640px.

Note that this is done by targeting the sections via id, which are set using the URL of the index page. So, if you change the URL of the index page in the back-end of Squarespace (to something other than new-gallery-1 and new-gallery-2, you'll have to update the CSS. Similarly, if you add more sections, you'd want to add them to the CSS.