RESOLVED: CSS to stack vertically on mobile only?

Site URL: http://www.annauma.ca

Password to site is annauma

I have used custom CSS to make one block have an image on one side and the content wrapper on the other by using, for example

.section-background{
    width:50%;
    margin-left:50%;
    overflow-y:hidden
  }
  .content-wrapper{
    width:50%;
    margin-right:50% !important; 
  }

This works great, but on mobile is way too squishy. So I inserted this code for only media with a width of 768 px or higher. The result is the text overlapping the images on mobile, which looks ridiculous, so I tried a content wrapper background overlay, which looks juvenile.

Instead, I want to stack the content wrapper on top of the image (instead of side by side) for mobile only, which I tried to achieve with versions of:

@media only screen and (max-width: 767px){[data-section-id="6240ea7e62ea482ca10d57dc"]
    .section-background{
     width:100%;
    margin-top:50vh !important;
    overflow-y:hidden
  }
  .content-wrapper{
    width:100%;
    margin-bottom:50% !important; 
    
  }

But, it seems to vary according to the device. The home page is done and looks fine on MY iphone, but on another person's android, the text runs into the next block. And the bottom margin changing affects the entire rest of the page and squishes up the pictures.  

Can anyone help me with the CSS to get the content wrapper to stack on top of the background image and stay contained/to scale for the device size on mobile? I'll attach a screenshot of how my phone looks (what i'm after) and how another person's phone looks (no bueno)

I ended up solving this by creating duplicate sections, removing the text from one and the image from the other, hiding the original from mobile and hiding the two new ones from desktop.