Flexbox Gridを使ってdivをスタックする方法は？

Question

私はhttp://flexboxgrid.comフレームワークを使用しています。

カラムをデスクトップ上で水平にしたいが、モバイルとそれに対応してスタックする。

例（デスクトップ）：

例（モバイル）：

<div class="row"> 
    <div class="col-xs"> 
     <div class="box">1</div> 
    </div> 
    <div class="col-xs"> 
     <div class="box">2</div> 
    </div> 
    <div class="col-xs"> 
     <div class="box">3</div> 
    </div><div class="col-xs"> 
     <div class="box">4</div> 
    </div> 
</div> 

は、ここで私が言っているものを示しているJSFiddleです。小さな画面やモバイル上行内の各列に1つのスタックdivをどのように正確

https://jsfiddle.net/RohitTigga/mfv622rt/

？

これはフレームワークでは不可能ですか？

Answer 1

フレックスボックスを使用するには、コンテナをフレックスコンテナにする必要があります。さらに、divボックスに最小幅を設定する必要があります。

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

.box { 
    min-width: 40px; 
} 

https://jsfiddle.net/abstraktion/mfv622rt/3/