responsive design - Getting Semantic Grids scss foundation 4 to work -

i have 3 sections collapse under default breakpoint not know how collapse own css using scss.

default foundation grid works , collapses

    <div class="row">   <div class="large-4 columns">...</div>   <div class="large-4 columns">...</div>   <div class="large-4 columns">...</div> </div> 

i tried below out but doesn't seem collapse

<div class="container">   <div class="div1">...</div>   <div class="div2">...</div>   <div class="div3">...</div> </div>  .container{ @include grid-row;  .div1 {     @include grid-column(4); } .div2 {     @include grid-column(4); } .div3 {     @include grid-column(4); } 

}

its because writing scss grid-row wrong.

    @include grid-row(); 

do not use @extend. not how foundation4 made used... @extend stuffs styles .row , .column , not want do, instead want stick styles styles reverse way using semantic code therefore can change code later in scss , updates later.

here correct answer:

html

<div class="container">   <div class="div1">...</div>   <div class="div2">...</div>   <div class="div3">...</div> </div> 

scss

.container{ @include grid-row();  .div1, .div2, .div3 {     @include grid-column(12);      @media #{$medium-up} {        @include grid-column(4);     }      @media #{$large-up} {            @include grid-column(4);     } } 

}

note: foundation 5. must create breakpoints. mobile breakpoint should have 12 columns if want whole view collapse in mobile, or whatever want. same as

<div class="small-12 columns"> </div> 

if want 4 columns medium , write:

<div class="small-12 medium-4 columns"> </div> 

so write symantically without helper classes write this:

<div class="myclassname"> </div> 

and scss code is:

.myclassname {     @include grid-column(12);      @media #{$medium-up} {        @include grid-column(4);     } }