place two divs per row

Question

so I have X divs and I want to put 2 divs in one row next to each other. If the screen size width is below n px there should be 1 div per row.

Currently I have this

#container {
  display: flex;
}

.box {
  width: 50px;
  background: red;
}

@media(max-width: 300px) {
  #container {
    display: block;
  }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>

How can I limit the flex box to two divs per row?

Answer 1

Add 50% width on .box and flex-wrap:wrap on the container

Additionally, what you did by changing display: flex to block was not required. Just change the .box elements width to 100%

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

.box {
  width: 50%;
  background: red;
}

@media(max-width: 300px) {
  .box {
     width: 100%;
   }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>