Switch order of columns on mobile

Site URL: https://craftanddraft.com

I need to change the display order of three columns of an sqs-row for this page

https://craftanddraft.store/science

Target section:

data-section-id="60c970e8e71b3634b9517c44" 

Current desktop view: 

text column 1 -- image column 2 -- text column 3

On mobile I want to have those stacked like this:

image column 2
text column 1
text column 3

I managed to get image column 2 on top but for some reason text columns 3 and 1 are reversed. @tuanphan @bangank36@creedon or any other css wizard, would you please help me figure this out? thanks in advance

Hi.

I see 1 image here, dont see 2 images. Where is text column 1, 3, 2, image column 1,2?

HI @tuanphan Thanks for taking the time to check this out. 

You're correct, there's only one image (the middle column). 

Attaching a screenshot for clarification. The stacking I want to achieve on mobile is:

COL 2 (image)
COL 1 (text)
COL 3 (text)

Add to Design > Custom CSS

/* Mobile-Science-order */
@media screen and (max-width:767px) {
div#page-section-60c970e8e71b3634b9517c44 {
.span-12>.row {
    display: flex;
    flex-direction: column;
}
.span-12 .span-6 {
    order: 1;
}
.span-12 .span-3:first-child {
    order: 2;
}
.span-12 .span-3:last-child {
    order: 3;
}
}
}

Excellent, that solved it. Thank you very much @tuanphan 😁

Hi @tuanphan, 

I have a similar problem that I'm not able to solve. 

On this page https://www.rotterdamfactoring.nl/team I have a black section and white section, each with an image + bio description on one side and additional text on the other side. 

On mobile the black sections work well; as the image+bio description is stacked on top of the text. The white sections however, are reversed. And I would love to solve this issue. 

I tried to reverse the order of the text by using:

[data-section-id="61052c572af77106fbc4263f"] {
  .content-wrapper {
    Padding-top: 0!important; 
    }
  .sqs-row {
    display: flex
    flex-direction: column-reverse;
  }
}

But it looks like I'm missing something as nothing is happening. Could you help me out?

Thanks!

11 hours ago, Liann10 said:

Hi @tuanphan, 

I have a similar problem that I'm not able to solve. 

On this page https://www.rotterdamfactoring.nl/team I have a black section and white section, each with an image + bio description on one side and additional text on the other side. 

On mobile the black sections work well; as the image+bio description is stacked on top of the text. The white sections however, are reversed. And I would love to solve this issue. 

I tried to reverse the order of the text by using:

[data-section-id="61052c572af77106fbc4263f"] {
  .content-wrapper {
    Padding-top: 0!important; 
    }
  .sqs-row {
    display: flex
    flex-direction: column-reverse;
  }
}

But it looks like I'm missing something as nothing is happening. Could you help me out?

Thanks!

Add to Design > Custom CSS

/* Team mobile order */
@media screen and (max-width:767px) {
div#page-section-61052c572af77106fbc4263f>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Thank you @tuanphan it worked!!