如何将弹性项目拆分为移动列？

Question

我正在使用flex，我有4列。如何将它与手机并排打开？

我的笔：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

将父级设置为flex-wrap: wrap;，将子级设置为width: 50%，每行2个。

.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>