Wie stapelt man divs mit Flexbox Grid?

Question

Ich verwende das http://flexboxgrid.com Framework.

Ich möchte die Spalten auf dem Desktop horizontal sein, aber auf mobilen und reagierenden Stapel.

Beispiel (Desktop):

Beispiel (Mobile):

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

Hier ist ein JSFiddle, der zeigt, was ich sage.

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

Wie genau funktioniert ein Stapel divs für jede Spalte in der Zeile auf einem kleineren Bildschirm oder Handy?

Ist das mit dem Framework nicht möglich?

Answer 1

Um Flexbox verwenden zu können, müssen Sie Ihren Container zu einem flexiblen Container machen und eine Mindestbreite für die Box divs festlegen.

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

.box { 
    min-width: 40px; 
} 

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