HOW TO: rearrange footer modules

[burt]

Someone messaged me asking for advice on how to rearrange footer modules. Thought a post would be helpful to all, and save me from writing it again in the future.

How to go from this (standard out of the box Phoenix) in XS (mobile phone) view;

footer_original.jpg

To this;

footer_after.jpg

Step 1: Change "Sort Order" on "Text Block" to 15
Admin > Modules > Content > {Text Block} > Edit > {Sort Order: 15} > Save

Step 2: Change "Content Container" on all 4 Footer Modules
Admin > Modules > Content > {all 4 of them} > Edit > {Content Container : **see next post**} > Save

[burt]

Each modules Content Container looks more or less like this;

Code: Select all

col-sm-6 col-md-3 mb-2 mb-sm-0

This says;
In XS view, make this content full width - note that this is implied and is not set explicitly in the above code
In SM view, make this content half width [6/12ths each]
In MD and larger views, make this content quarter width [3/12ths each]

Unimportant in the context of this post, but explained for clarity;
In XS view give this content a Bottom Margin of "2".
In SM and larger, make this content have a Bottom Margin of "0".

We are solely interested in amending that XS view, so that it looks like the example.

You COULD do this, simply add col-6 (making XS view half width [6/12ths]);

Code: Select all

col-6 col-sm-6 col-md-3 mb-2 mb-sm-0

Or you could do this, which is preferable as it is less code;

Code: Select all

col-6 col-md-3 mb-2 mb-sm-0

By amending each modules "Content Container" like this, it now says;
In XS and SM view, make this content half width [6/12ths]
In MD and larger views, make this content quarter width [3/12ths]
As well as the unchanged margin bottom settings.