changing display style doesn't work when use of media query

I have written two different types of css display style(one for flex & one for grid) and each of them are meant to be applied differently as screen size is changed. I made the mobile version first and desktop version next. below is the mobile version html&CSS code and it displays as it is meant to.

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

<body>
    <div class="container header">
        <header> Header </header>
    </div>
    <div class="container p">
        <p>But Apple is clearly disappointed with
           itself over this whole thing. It’s a humbling embarrassment
           for a company that so often highlights its focus on user
           security and privacy. "Security is a top priority for every
           Apple product, and regrettably we stumbled with this 
           release</p>
    </div>
    <div class="container aside1">
        <div class="aside1_1">Aside1</div>
    </div>
    <div class="container aside2">
        <div class="aside2_2">Aside2</div>
    </div>
    <div class="container footer">
        <footer>Footer</footer>
    </div>

However, if I attach the second CSS code(which is for desktop screen size), somehow the page layout gets mess even when I shrink the width under 400px. Below is the full CSS code.

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

@media (min-width:400px) {
  body {
    background-color: lavender;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 50% 25%;
    text-align: center;
    height: 800px;
  }

  .header {
    background-color: rgb(255,80,100);
    grid-column: 1 / 4;
    padding-top: 50px;
  }

  header {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
    grid-column: 2 / 3;
  }

  p {
    font-size: 30px;
    padding: 20px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .aside1_1 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
    grid-row: 3 / 4;
    grid-column: 1 / 4;
  }

  footer {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
    padding-top: 70px;
  }
}

Solution

I see one minor detail that at 400px viewport both of your media queries would apply, probably not what you want.

You might want to consider a change like:

@media (max-width: 400px) {  
...
}    

@media (min-width:401px) {
...
}

I'm not convinced that your issue is related to the order of your CSS though.

I have an exact copy of your HTML and CSS at https://codepen.io/panchroma/pen/qVQQoG and the mobile / desktop layouts seem to work well for me.

The one addition I've made in this pen is that I've added a viewport meta tag in the header

<head> 
   ...
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   ...
</head>

If you don't have this meta tag in your code, add it and see if this helps.

Also, is there any other CSS in your page, other than what you've posted?

Good luck!