How to handle a Responsive 5 Column layout using Zurb’s Foundation 5

This is a 5 column responsive layout that will adjust in 3 screen sizes small (phone screens), medium (tablets) and large (PC).
1 columns for smart phone screens, 3 rows and 2 columns on first 2 rows on tablet screens and 1 row with 5 columns on large screens like laptop and PC.

Here you go kids! You’ve learned new tricks today!

    <div class="row">
        <div class="large-5 columns">
            <div class="row">
                    <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-5 columns">
            <div class="row">    
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-2 columns">
            <div class="row">        
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-12 columns">#</div>                    
                    </div>
                </div>                        
            </div>
        </div>
    </div>