Foundation 5 how to make one column for small screen - css

Question

I have the following grid using zurb-foundation:
<div class="row">
<div class="small-6 large-3 columns"> </div>
<div class="small-6 large-9 columns"> </div>
</div>
The above grid makes the layout of two columns. However, I want to know in small screens to make the above layout to be one column layout instead of two columns with 6. In other words, I want the second div of that row to act as a new row for small screens.

Answer 1

Assuming you are using the standard 12 column grid and haven't modified that, just make the small ones 12:
<div class="row">
<div class="small-12 large-3 columns"> </div>
<div class="small-12 large-9 columns"> </div>
</div>
Just know that small filters it's way up... so in this example "medium" will also be 12. If you want medium to look like large, then do this:
<div class="row">
<div class="small-12 medium-3 columns"> </div>
<div class="small-12 medium-9 columns"> </div>
</div>
Notice how you don't need the large in the above example as medium filters up to everything above it.

Answer 2

using the below Html you can have offset and have centered div on mobile screen.and have large-3 and large-9 div respectively on larger screens.
<div class="row">
<div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div>
<div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div>
</div>
In foundation css column last child is floated right.so we change it to float left to have both the div stacked up on after the other
.new{
float:left;
}

Answer 3

Something like this should work:
<div class="row">
<div class="medium-6 large-3 columns">
<div class="small-6 medium-12 large-12 columns">column 1</div>
</div>
<div class="medium-6 large-9 columns">
<div class="small-6 medium-12 large-12 columns">column 2</div>
</div>
</div>
http://jsfiddle.net/6tMZH/

Answer 4

should be a simple fix:
.columns {
width:100%;
}
You can see it here