How can I rearrange the footer in mobile view using only CSS?

Store Design

Topic summary

Goal: Rearrange the footer in mobile so social links are on top, buttons remain in the middle, and store info is at the bottom using CSS only.

Initial solution: Add mobile-only CSS in theme.css using a media query (max-width: 749px). Set the footer container (.custom-footer) to display: flex with wrap and centered content; make each .ft-box full width; reorder blocks with .footer-block1 set to order: 3 and .footer-block2.order-button set to order: 2. The user confirmed this worked.

Follow-up change: The user requested a different arrangement shown in a new screenshot.

Updated CSS: Within the same media query, set all .ft-box to order: 2; override .footer-block2.order-button to order: 1 with no top padding; set .footer-block1 to order: 3 with 15px top padding. This achieves the revised order.

Technical notes: Relies on CSS Flexbox and the “order” property to rearrange elements without HTML changes; the media query targets mobile widths (≤ 749px). Screenshots are central to understanding the desired layouts.

Status: Resolved; helper remains available for further assistance.

Summarized with AI on February 22. AI used: gpt-5.
1

Hello I have a website Im working on msmoh.myshopify.com

I want to change the footer arrangement only in the mobile view where the social media links are on the top, the two buttons are as they are in the middle and the store info is in the bottom.

I want to do it using css only. Any suggestions?

2

Screen Shot 2022-03-02 at 4.11.40 PM.png
Screen Shot 2022-03-02 at 4.11.40 PM.png944×1218 172 KB

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
footer#footer .custom-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
footer#footer .custom-footer .ft-box {
width:100%;
}
footer#footer .custom-footer .ft-box.footer-block1 {
order: 3;
}

footer#footer .custom-footer .ft-box.footer-block2.order-button {
order: 2;
}
}
4

Hi thanks that solution worked.

I have a question what would it be if I wanted to change the arrangement to the one attached below

Screen Shot 2022-03-02 at 4.11.40 PM.png
Screen Shot 2022-03-02 at 4.11.40 PM.png944×1218 176 KB

5
  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:

replace this one css

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
footer#footer .custom-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
footer#footer .custom-footer .ft-box {
width:100%;
order: 2;
}
footer#footer .custom-footer .ft-box.footer-block1 {
order: 3;
padding-top: 15px;
}

footer#footer .custom-footer .ft-box.footer-block2.order-button {
order: 1;
padding-top: 0;
}
}
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.