Dawn - Change multicolumn section order only in mobile view

Store Design
1

Hi there,

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

A developer provided me with the following solution:

@media(max-width: 749px){
    .multicolumn-list{
    display: flex;
}

/* text */
.multicolumn-list > *:nth-child(1){
    order: 2;
}

.multicolumn-list > *:nth-child(2){
    order: 1;
}

}

But this seems to change all of the multicolumn sections around and the result looks like this:

sisaul_0-1649790066647.png

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 (1st and 3rd), I would be very thankful.

Thank you in advance!

Here is the preview link for the store: https://nret3xk8yfsz0i78-60215460006.shopifypreview.com

1 Like
2

Hi @sisaul ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-multicolumn.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
#Slider-template--15270810747046__164077784986231bae, #Slider-template--15270810747046__16407899472b6ead80 {
    display: flex !important;
    flex-direction: column-reverse !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@sisaul

sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-multicolumn.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {
#shopify-section-template--15270810747046__1640789685c321a5df .multicolumn-list:not(.slider) {flex-direction: column-reverse;}
}
1 Like
4

Hi @KetanKumar ,

Adding this made it work exactly as I wanted it to.
Thanks a lot!

5

@sisaul

if my pleasure to help us

1 Like