CODEWITHSUNDEEP
htmlgridzurb-foundationzurb-foundation-5
Burning Crystals
Burning Crystals

Reputation: 1167

Zurb Foundation 5: Grid Column Stacking

I'm new to foundation and I only have the basic idea on how to use grids.

I have these 3 columns that need to be stacked (see "mobile" image) when viewed on mobile/small screens. mobile screen

It should look something like this when in larger screens:

non-mobile screen

Here's my current code. It's not quite what I wanted, and I'm starting to get confused.

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

Upvotes: 2

Views: 1461

Answers (2)

Nicolas Le Thierry d&#39;Ennequin
Nicolas Le Thierry d&#39;Ennequin

Reputation: 6164

Try this (the blocks will flow in the correct order on small screens):

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

Upvotes: 1

Chinmaya Hegde
Chinmaya Hegde

Reputation: 775

This grid system will work for large and small screens

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

Upvotes: 4

Related Questions