zurb-foundation-5

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. It should look something like this when in larger screens: 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: