Zurb Foundation 5 : Grid Column Stacking

Question

저는 기초가 생소하고 그리드 사용 방법에 대한 기본적인 아이디어 만 가지고 있습니다.

모바일/소형 화면에서 볼 때이 3 개의 열을 쌓아야합니다 ('모바일'이미지 참조).

여기 내 현재 코드입니다 : 때 큰 화면에서

은 다음과 비슷한 모습이 될 것입니다. 그것은 내가 원했던 것이 아니며 혼란스러워지고 있습니다.

<div class="row"> 
    <div class="large-12" style="background-color:#bdc3c7;"> 
     <div class="medium-4 medium-push-8 columns" style="background-color: #1abc9c; border: 1px solid #2c3e50;"> 
     <p>TOP ROW</p> 
     </div> 

     <div class="medium-8 medium-pull-4 columns" style="background-color: #e74c3c; border: 1px solid #2c3e50; height: 250px;"> 
     <p>MIDDLE ROW</p> 
     </div> 

     <div class="medium-4 columns" style="background-color: #9b59b6; border: 1px solid #2c3e50;"> 
     <p>BOTTOM</p> 
     </div> 
    </div> 
</div> 

Answer 1

이 그리드 시스템은 크고 작은 화면

<div class="row"> 
    <div class="small-12 large-8 columns"></div> 
    <div class="small-12 large-4 columns"></div> 
    <div class="small-12 large-4 columns"></div> 
    </div> 

Answer 2

위해 작동이 (블록이 작은 화면에 올바른 순서로 흐른다) 시도 :

<div class="row"> 
    <div class="small-12 large-4 columns right">1</div> 
    <div class="small-12 large-8 columns">2</div> 
    <div class="small-12 large-4 columns">3</div> 
</div>