フレックスアイテムをモバイル用の列に分割する方法は？

Question

私はフレックスを使用していますが、私は4列あります。モバイル用に2つ並んでいるのはどうでしょうか？

マイペン：行ごとに2を持っているwidth: 50%にflex-wrap: wrap;に親と子を設定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

。

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