Text above image in image-with-text section on mobile

[skjoldet]

I have a website skjoldet.dk, where i use the [image with text] section as the first on my home page. 

I would like to show the text before the image in mobile view. How do I do that for that section only? 

I am using the Refresh theme.

I have tried this from another thread but I did not work:

@media only screen and (max-width: 767px) {

.grid.sm-grid-cols-2 {

display: grid;

grid-template-columns: 1fr;

grid-template-rows: auto;

}

.col-sm-order-2 {

grid-row: 2;

}

}

Thanks in advance 🙂

[oscprofessional · Accepted solution]

Hello @skjoldet 

1) Go to Online Store > Theme > Edit Code 
2) Open the component-image-with-text.css file
3) Add the code at the end in the file

@media screen and (max-width: 749px) {

  .image-with-text__media-item {

    order: 2;

}

.image-with-text__text-item.grid__item {

    order: 1;

}

}
Hope it works for you
Thanks