How to Remove Side-by-Side customization on Mobile

Site URL: https://heron-bamboo-tngm.squarespace.com/about-us

https://heron-bamboo-tngm.squarespace.com/about-us

PW: Squarespace2021$

Hi I'm trying to remove the side-by-side customization on mobile. Or any other possible solution. 

I solved it and sharing the code here in case it helps anyone else.

Here is the code to reverse the side-by-side on mobile:

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 767px)";

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* ABOUT US PAGE - split section */
 [data-section-id="6220100d0da5aa3524190bd5"] {
  .section-background {
    width: 100% !important;
    margin-left: 0%;
  }
  .content-wrapper {
    width: 45% !important;
  }
    display:block;
    .section-background, content-wrapper {
      position:relative;
    }
    .section-background {
      height: 300px;
    }
  }
  #block-yui_3_17_2_1_1646520366742_4113 {
    margin-left: -100% !important;
  }
/*Section 2*/
[data-section-id="621fed6367fab200e77fa077"] {
  .section-background {
    width: 100% !important;
    margin-left: 0% !important;
  }
  .content-wrapper {
    width: 45% !important;
  }
    display:block;
    .section-background, content-wrapper {
      position:relative;
    }
    .section-background {
      height: 300px;
    }
  }
#block-yui_3_17_2_1_1646259535604_3825 {
    margin-right: -100% !important;
  }

/* Insert Code for Mobile Above This Line */
}