Rearrange Columns in Zurb Foundation

Question

my problem is that while on a desktop I like having the menu first, and then the logo in the far right corner. Currently when I shrink the template to a mobile version, the logo goes under the menu which is not satisfactory. I would like to have it before the menu. I've tried using push/pull with no success.

Is it even possible to have the logo on top of the template when in mobile view?

Here is my code...

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="ten columns mobile-four">
                <nav>
                    <ul>
                                        <li><a href="#">link</a></li> 
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
                        <div class="two columns mobile-four">
                <a href="index.php"><img src="images/logo.png" alt="logo"/></a>
            </div>
                </div>
    </div>

Answer 1

So first you can do away with the mobile-four class, it doesn't do anything (unless its custom to you). Looking at the documentation there is a mobile-[one two three], four would be the equivalent to leaving it off.

To fix the problem, simply apply a source ordering class, like so:

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="two columns push-ten">
                <a href="index.php">
                    <img src="images/logo.png" alt="logo" /></a>
            </div>
            <div class="ten columns pull-two">
                <nav>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

Push and pull will correctly order the Menu first and Logo second. Push and pull are ignored on mobile, meaning your logo will stack above the menu on mobile.

Desktop: [Menu][Logo]

Mobile [Logo] [Menu]

Docs: http://foundation.zurb.com/docs/grid.php