How to move the image above the text when on mobile?

Question

So I have a div with an image and text. When I am on screens wider than 680px I want it to display side to side. The image next to the text. This works fine currently.

The issue is, when I am on mobile or screens less wide than 680px I want the image to be above the text instead.

I have tried multiple solutions: Like changing the div into a display: flex; and adding flex-direction:column; , although this works, even though I have a media query on max 680px, when I make the screen wider it still has the same display flex and flex-direction column on it.

This is my code:

<section class="inner-Event">
  <div class="container">
    <div class="imgContainer"> 
    {% if section.settings.image != blank %}
       <img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" class="imgContainerimg"> 
       {% else %}
        {% capture current %}{% cycle 1,2 %}{% endcapture %}
        {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg'}}
    {% endif %}
    </div>

    <div class="twoContainer">
        <div class="threeContainer">
            <div class="fourContainer">
                <h1>{{section.settings.title}}</h1>
                {{ section.settings.date_picker | date: "%d-%m-%Y" }}
                {{section.settings.description}}
                <a href="{{section.settings.button_link}}" class="#">{{section.settings.button_label}}</a>
            </div>
            
        </div>
    </div> 
  </div>

</section>

{% schema %}
{
    "name": "Event",
   "class": "Event",
  "settings": [
   {
        "type": "image_picker",
        "id": "image",
        "label": "event Image"
    },
    {
        "type": "text",
        "id": "title",
        "default": "exampleTitle",
        "label": "event Title"
    },
    {
    "type": "text",
    "id": "date_picker",
    "label": "Kies een Datum",
     "default": "01-01-2022",
     "info": "bijv. dd-mm-yyyy"
    },
    {
        "type": "richtext",
        "id": "description",
        "default": "<p>Example Paragraph</p>",
        "label": "event Description"
    },
    {
        "type": "text",
        "id": "button_label",
        "default": "Button",
        "label": "event Button Label"
    },
    {
        "type": "url",
        "id": "button_link",
        "label": "event Button Link"
    }
  ],
 "presets": [
    {
        "category": "hero",
        "name":"Events"
    }
 ]
}
{% endschema %}

<style>
  
    .inner-Event {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  
  @media only screen and (min-width: 760px) {
    .twoContainer {
      margin-left: 3vw;
      max-width: 25vw;
    }
  }
  
    @media only screen and (min-width: 250px)  {
    .twoContainer {
      max-width: 60%;
      margin: 0 10vw 5vh 10vw;
    }
  }
  
  @media only screen and (min-width: 1280px) {
    .inner-Event {
      margin: 0 10vw 0 10vw;
      max-width: 80vw;
    }
  }  
  
    @media only screen and (min-width: 2680px) {
    .inner-Event {
      margin: 0 30vw 0 30vw;
      max-width: 60vw;
    }
  }  

   @media only screen and (max-width: 680px) and (min-width: 148px){
     .imgContainer {
       position: relative;
     }
    }

    @media only screen and (max-width: 680px) {
    .inner-Event {
      margin: 20vh 0 0 0;
    }
    }

   @media only screen and (max-width: 680px) {
     .imgContainerimg {
       margin: 0 25% 0 25%;
     }
   }
   @media only screen and (max-width: 680px) {
     .twoContainer {
       margin: 0 25% 0 25%;
     }
   }
  
</style>