How can I rearrange column layout for mobile view only?

Store Design
, ,
1

Hi there,

I would like to change the order of the 1st and 3rd custom section 2 in my website, but only when it comes to displaying in mobile view.

My current look like this

arterahome.com_pages_masters-of-handcrafted-excellence.png
arterahome.com_pages_masters-of-handcrafted-excellence.png800×2527 697 KB

The end result what I would like to receive for the mobile view would be 1st - Image, 2nd - Text for all 3 sections.

Does somebody know how to achieve it? If the provided code snippet can only be implemented on specific multicolumn sections (2nd one), I would be very thankful.

Thank you in advance!

Here is the preview link for the page: https://arterahome.com/pages/masters-of-handcrafted-excellence

2

Hello @arterahome ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code below:

@media screen and (max-width: 767px) {
 #bk_a9c107db-5177-4988-ab89-9b3d89ff9bd5 {
    order: 1;
}
}

only for specific column.

Thanks

3

Brilliant!

Thank you so much.

One question: Do I need to do this every time I create new page? Do you know how to make this something auto or don’t need to add to theme.css everytime?

4

Yes you need to add css every time on new page.
Yes a developer can provide you an option with each multicolumn to select the order or code it dynamically so that the even columns will order as you need.

5

It’s two questions. Silly me!

Thank you so much. This saves me this time :+1:

1 Like