mobile Reordering footer blocks on mobile with multiple columns

Site URL: https://emmaratcliffe.squarespace.com/

I'm looking to reorder the blocks in the footer of this site https://emmaratcliffe.squarespace.com/ (password: emma)
Column reverse doesn't seem to be working as i've got multiple columns and looking to rejig the order differently.

I've attached an image of the order I'm looking to achieve...Any help greatly appreciated! 

Hi, Add to Design > Custom CSS

/* Footer mobile order */
@media screen and (max-width:767px) {
div#page-section-6040ce2c69b9ec5adb58e120 .span-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

@tuanphan I've dropped that in the CSS however no changes seem to be happening? Are there any other steps I need to do? Thanks!

On 3/26/2021 at 3:55 PM, bryonymelhuish said:

@tuanphan I've dropped that in the CSS however no changes seem to be happening? Are there any other steps I need to do? Thanks!

I guess you edited something after posting this question?

Use this new code

/* Footer mobile order */
@media screen and (max-width:767px) {
div#page-section-6040ce2c69b9ec5adb58e120>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

@tuanphan That worked! Thanks so much!

On 3/29/2021 at 10:14 PM, bryonymelhuish said:

@tuanphan That worked! Thanks so much!

Do you want to change order of some images/text on mobile?

@tuanphan Yes I do! I've been trying to mess around with the order but haven't quite been able to do it so any help greatly appreciated or that front!

For the homepage I was hoping to go:
Hero Text
Hero Image

'Hello nice to meet you'
Image carousel

How we can work together..
Image
Product Photography
Image
Brand Photography
Image
Social Media management
 

On 3/31/2021 at 4:09 PM, bryonymelhuish said:

@tuanphan Yes I do! I've been trying to mess around with the order but haven't quite been able to do it so any help greatly appreciated or that front!

For the homepage I was hoping to go:
Hero Text
Hero Image

'Hello nice to meet you'
Image carousel

 

How we can work together..
Image
Product Photography
Image
Brand Photography
Image
Social Media management
 

 

Add this to Last Line in Settings > Advanced > Code injection > Footer > Then save & reload your site & check on real mobile

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Hero
$('[data-section-id="6040f88ebbcd3b4456265c58"]').insertBefore('[data-section-id="60525b93f424de02d80d7589"]');
  // How we work
  $('[data-section-id="60410bc9d667d703e412393e"]').insertBefore('[data-section-id="60410c00d667d703e41247a3"]');
  $('[data-section-id="60415061c15d572cdeffc15f"]').insertBefore('[data-section-id="60415068a32c6111c2f43a69"]');
}
});
</script>

and add this to Code Injection Header

<style>
  @media screen and (max-width:767px) {
  body.homepage article section:first-child {
    margin-top: 10vh;
}
  }
</style>

@tuanphan Great thank you - worked a treat!

On 4/6/2021 at 5:50 PM, bryonymelhuish said:

@tuanphan Great thank you - worked a treat!

Hi. I see the site has some small problems.

Site URL: https://emmaratcliffe.squarespace.com/

1. (Mobile-Homepage) Change order of some images-text?

2. (Tablet-Homepage) Similar above

3. (Tablet-About page) “deliver” text

4. (Tablet-About)

5. (Tablet-Product Photography) resize button text size?

Hi @tuanphan Thanks! 
1/2: The order you gave me works fine on a real phone however when you scale the browser they don't stack correctly....Not sure if we can do it a different way? 

3: The font's don't seem to scale the way they used to. Is there a way to stack 1 & 2 on one row and then 3 & 4 underneath on a separate row to avoid the 'r' being dropped? If not I will just tweak the font size on tablet for that section manually. There are minimal views on tablet but it would be good to have it perfected! 😛

4/5: The client wanted all the $$ to be in a row hence the gap inbetween - I'm okay with that button text size as I want to keep it consistent across the whole site! 

Cheers! 
B

1.2. I meant do you want to show image - text - image - text...

or

text-image-text-image

Currently, it is text - image - image - text - text - image

3. Add to Design > custom CSS

/* Tablet process */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6046008801dcd3572ad33f4e>.row:nth-child(2) .span-3 {
    width: 50% !important;
}
}

@tuanphan Thanks - process works well on ipad now. 

Re homepage order. Yes I'd prefer alternating Text - Image for the 'How we can work together' section. So yes to: text-image-text-image !

@tuanphan Hi Tuanphan,

I used the jQuery you shared above to reorder blocks on mobile for a 7.1 site I'm working on. It worked perfectly for the mobile layout! However, when I checked the desktop version after implementing the code, it messed up the order of blocks on desktop. I've removed the code so you can see what the site is supposed to look like. I want it to all stack on mobile in the order that it appears on desktop, but this is a bit more difficult to do since it's one long running section, due to the svg drawing. 

Here is the code I used based on what you shared above: 

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Home
$('[id="block-yui_3_17_2_1_1616534876033_9539"]').insertBefore('[id="block-yui_3_17_2_1_1617244295632_10731"]');
$('[id="block-yui_3_17_2_1_1616535620182_17948"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
$('[id="block-yui_3_17_2_1_1618934611350_9751"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
}
});
</script>

Here is the site I'm working on: https://drc.squarespace.com/home

Any suggestions? 

Thank you!

18 hours ago, stephanieberbec said:

@tuanphan Hi Tuanphan,

I used the jQuery you shared above to reorder blocks on mobile for a 7.1 site I'm working on. It worked perfectly for the mobile layout! However, when I checked the desktop version after implementing the code, it messed up the order of blocks on desktop. I've removed the code so you can see what the site is supposed to look like. I want it to all stack on mobile in the order that it appears on desktop, but this is a bit more difficult to do since it's one long running section, due to the svg drawing. 

Here is the code I used based on what you shared above: 

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Home
$('[id="block-yui_3_17_2_1_1616534876033_9539"]').insertBefore('[id="block-yui_3_17_2_1_1617244295632_10731"]');
$('[id="block-yui_3_17_2_1_1616535620182_17948"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
$('[id="block-yui_3_17_2_1_1618934611350_9751"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
}
});
</script>

Here is the site I'm working on: https://drc.squarespace.com/home

Any suggestions? 

Thank you!

Answered email.