Foundation 12 Grid Does Not Work Properly

I have a code as below:

<div class="content">
    <div class="row">
        <div class="left-frame large-3 medium-3 hide-for-small columns">
            <header class="icon-bar five-up" role="navigation">
                <a class="item"><i class="fa fa-info-circle"></i></a>
                <a class="item"><i class="fa fa-info-circle"></i></a>
                <a class="item"><i class="fa fa-info-circle"></i></a>
                <a class="item"><i class="fa fa-info-circle"></i></a>
                <a class="item"><i class="fa fa-info-circle"></i></a>
            </header>
            <div class="side-nav">
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
                <li><a href="#">q</a></li>
            </div>
            <footer class="pagination-centered">
                <ul class="pagination">
                    <li class="arrow unavailable"><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li class="arrow"><a href="#">&raquo;</a></li>
                </ul>
            </footer>
        </div>
        <div class="content large-9 medium-9 small-12 columns">
            <div class="row">
                <div class="large-3 medium-3 small-12 columns">q</div>
                <div class="large-6 medium-6 small-12 columns">q</div>
            </div>
            <div class="row">
                <div class="large-3 medium-3 small-12 columns">q</div>
                <div class="large-6 medium-6 small-12 columns">q</div>
            </div>
        </div>
    </div>
</div>

What I want is 3 to 9 grids on a page. However, second column goes inside the first as below:

Why does that happen? It is surely 3 and 9. What I want is to get second column in its own place.

---

Environment

• foundation 5.5.3