Position 2 items per row in flexbox

Question

this is my html structure.

<div class='parent'>
  <div class='title'> Some title </div>
  <div class='element'> Element 1</div>
  <div class='element'> Element 2</div>
  <div class='element'> Element 3</div>
</div>

The CSS for the parent is

.parent {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row;
}

In the desktop view, the elements look like this:

Some Title   Element1   Element2  Element 3 

When the window is smaller, the elements wrap like this:

Some Title   Element1   Element2  
Element 3

Is there a way to put two elements per row when the wrap property starts to take effect? Like this:

Some Title   Element1 
Element2     Element 3 

Answer 1

Flex-basis sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. You can learn more from the MDN docs.

Thanks to @Bart Hofland.

.parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border: 1px solid red;
}

.parent > div {
   flex-basis: 25%;
}



@media only screen and (max-width: 400px) {
  .parent > div {
     flex-basis: 50%;
   }
}

<div class='parent'>
  <div class='title'> Some title </div>
  <div class='element'> Element 1</div>
  <div class='element'> Element 2</div>
  <div class='element'> Element 3</div>
</div>