How to break flex items into columns for mobile?

Question

I'm using flex and I have 4 columns. How would I break it to have 2 side by side for mobile?

My pen: http://codepen.io/omarel/pen/PpPXao

.flexparent {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
}

.flexparent .flexchild {
  width: 30%;
}

<div class="flexparent">
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-trains.png" alt="">
    <h2>Col 1</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-events.png" alt="">
    <h2>Col 2</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-parks.png" alt="">
    <h2>Col 3</h2>
  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-walk.png" alt="">
    <h2>Col 4</h2>
  </div>
</div>

Answer 1

Set the parent to flex-wrap: wrap; and the children to width: 50% to have 2 per row.

.flexparent {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
}

.flexparent .flexchild {
  width: 30%;
}

@media (max-width: 420px) {
  .flexparent {
    flex-wrap: wrap;
  }
  .flexparent .flexchild {
    width: 50%;
  }
}

<div class="flexparent">
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-trains.png" alt="">
    <h2>Col 1</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-events.png" alt="">
    <h2>Col 2</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-parks.png" alt="">
    <h2>Col 3</h2>
  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-walk.png" alt="">
    <h2>Col 4</h2>
  </div>
</div>