How can I make six squares with circles an letters in it

Question

I’m struggling with the following assignment. I have to build an element with 6 squares with rounded edges in which there’s a smaller coloured circle with a letter in it. The cubicles with the circles and letters have to adjust to the screen size and keep the squared shape. Also they have to be lined up 2 by two (2 columns, 3 rows). The letters in the cubicles have to spell the word TOP from top to bottom (so two times). When the screen size becomes larger then 1024 pixels the cubicles should line up in 2 rows of three cubicles also spelling the word TOP but now from left to right. I’m not suppose to use grid but I can use flex. Could you give me some hints so I can complete this task? That would be so great!

My code this far:

I tried absolute and relative positioning, mediaqueries, etc. At the moment this is my code:

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>* {
  flex: 1 1 40%;
}

.square {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 10px;
  min-width: 400px;
  min-height: 400px;
  ;
  border: 0.062rem solid #f00;
  Margin-top: 0;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 20px;
}

.vierkant div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  border: 0.062em solid #000;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fed;
  box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3);
}

<div class="container">
  <div class="square">
    <div>
      <p>T</p>
    </div>
  </div>
  <div class="square">
    <div>
      <p>T</p>
    </div>
  </div>
  <div class="square">
    <div>
      <p>O</p>
    </div>
  </div>
  <div class="square">
    <div>
      <p>O</p>
    </div>
  </div>
  <div class="square">
    <div>
      <p>P</p>
    </div>
  </div>
  <div class="square">
    <div>
      <p>P</p>
    </div>
  </div>
</div>