How to place an element beneath another on a page with different height elements using flex? (CSS)

Question

I'm trying to create a splash page with different sized blocks using flex, however if I have an element the size of the whole page and 2 smaller elements beside it, the next element goes beneath all elements rather than in the space between created by the different heights.

My relevant html:

  <div class="flex-container">       <!-- for flex -->
          <p class="box one">Try out new puzzle game!
          </p>
          <p class="box two">Check out our top 3 recommended puzzles!
          </p>
          <p class="box three">News
          </p>
          <p class="box four"> About us
          </p>
    </div>

my relevant css:

 .flex-container {
      margin: 0 5% 0 5%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;


    }

    .box {

      padding: 15% 0px 15% 2%;
      border-radius: 25px;
      background-color: gold;
      border: 2px solid black;
      text-align: center;



    }

    .one {
      width: 100%;

    }

    .two {
      display: flex;
      margin-right: 2.5%;
      flex: 1;

    }

    .three {
      display: flex;
      flex: 1;
    }

    .head

er {
  color: white;
  background-color: blue;
  padding: 2% 0 2% 0;
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}


.homeimage {
    display: block;
    margin: 0 auto;
}

This works fine, but it's the media query which tries to create the splash page that doesn't.

@media screen and (min-width: 1024px) {

   .flex-container {
     margin: 0 2% 0 2%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content:center;
     flex: 1;


   }



    .one {
     width: 40%;
     height: 500px;
     display: block;
     margin-right: 2%;


   }

   .two {
     margin-right: 2.5%;
     flex: 1;
     height: 40%;

   }

   .three {
     flex: 1;
     height: 40%;
   }

   .four {
     width: 50%;
     align-self:

   }



}