Changing the order of blocks in mobile view

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

4 hours ago, TomMesquitta said:

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

 

I can not access your site at the moment. Can you check it again?

Sorry, my client has adjusted the DNS settings 🙄

You should be able to view the site at:
https://disc-snail-sk6j.squarespace.com

Thanks.

'www.fevronia.net' is also up and running again now.

On 11/19/2021 at 5:14 PM, TomMesquitta said:

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

 

Add to Design > Custom CSS

/* mobile collections order */
@media screen and (max-width:767px) {
div#page-section-618e3f56c9ff232648226b07>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-618e40cbc756e974036263a5>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-618e400cde3df46a31d707ac>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

The CSS worked perfectly many thanks Tuanphan!