@media to push a div under another div with flex

Question

I have been learning Flex and finally ran into my first problem. I have listed my codepen below where the squares move and resize how I want them too. However, when I set a "mobile" sized media rule I can not get the side column "sideCol" to move underneath the main column "mainCol". I am not even sure if this is a job for flex.

https://codepen.io/HamHat/pen/YaZJQN

body{
  display:flex;
}

.sideCol {
  width: 20%;
}
.mainCol {
   width: 100%;
   text-align:center;
}

.square{
   display:inline-block;
   height: 145px;
   width:300px;
   text-align:center;
   vertical-align:bottom;
   background-color: blue;

}

.sideSquare{
  width:300px;
  height:300px;
  display:inline-block;  
  background-color: red;
}

@media only screen and (max-width: 650px) {
    .mainCol {
     width: 100%;
    }

    .sideCol {
      width: 100%;

    }
    .square{
      width:100%;

  }

  .sideSquare{
   width: 100%;

  }

}