Mobile Blocks Not Reordering

Site URL: http://www.taichinash.com

I have added this to my CSS Code to try to fix my Mobile site. (It's a mess).

@media only screen and (max-width: 640px) {
div#page-section-62efe18aa0206c077b5ab055 .row {
    display: flex;
    flex-direction: column-reverse;
}}

I have lots to re-order on the Mobile site. The page looks fine on full browser. Before I fix the whole mobile site - I am trying to get following.

Image 1. Text 1. then

Image 2. Text 2.

It's showing up as

Text 1. Image 1.

Image 2. Text 2.

Not even sure how I will tackle the three columns yet. Any help would be great. Websites and CSS are not my strength 😉 Tai Chi is.

Thanks

17 hours ago, AnnaT said:

Site URL: http://www.taichinash.com

I have added this to my CSS Code to try to fix my Mobile site. (It's a mess).

@media only screen and (max-width: 640px) {
div#page-section-62efe18aa0206c077b5ab055 .row {
    display: flex;
    flex-direction: column-reverse;
}}

I have lots to re-order on the Mobile site. The page looks fine on full browser. Before I fix the whole mobile site - I am trying to get following.

Image 1. Text 1. then

Image 2. Text 2.

It's showing up as

Text 1. Image 1.

Image 2. Text 2.

 

Not even sure how I will tackle the three columns yet. Any help would be great. Websites and CSS are not my strength 😉 Tai Chi is.

Thanks

I try the following code and it seems fine

@media only screen and (max-width: 767px) {
  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:first-child {
    grid-area: 7/2/13/10; 
  }

  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:last-child {
    grid-area: 1/2/6/10;
  }
}

Let me know how it works on your site

My testing

@bangank36

Thank you the CSS code you mentioned. This did not make the changes for me. It looks like it worked for you. Any other ideas?

On 8/10/2022 at 2:50 AM, AnnaT said:

Thank you the CSS code you mentioned. This did not make the changes for me. It looks like it worked for you. Any other ideas?

Try changing his code to this

@media only screen and (max-width: 767px) {
  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:first-child {
    grid-area: ~"7/2/13/10" !important; 
  }

  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:last-child {
    grid-area: ~"1/2/6/10" !important;
  }
}

Adding 

!important; Did make the CSS work... Thanks