Twitter bootstrap responsive elements order

Question

I have a html file and css as below. I want to create a responsive web page like this page http://www.elated.com/res/File/articles/authoring/responsive-web-design-demystified/responsive-480-meta.html

However, the navigation bar is currently at the bottom of the page while it should be on the top. How can I modify the css in order to bring the nav bar to the top when the it displays on a small screen.

title

    <div class="container">
        <div class="row">
            <div class="header">
                <h2>Header</h2>
            </div>
        </div>
        <div class="row page-content">

            <div id="content" class="span7">                
                <h1>Responsive Layout</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Curabitur et leo dui, eu semper tellus. Vivamus aliquam, mi ultrices fringilla varius, augue nisl tincidunt elit, eu tincidunt ante metus ac mauris. Praesent congue blandit nunc, eu facilisis ligula faucibus sit amet. Proin eget turpis nulla. Phasellus mattis nisi a ante aliquet posuere. Vestibulum tortor quam, luctus imperdiet venenatis nec, molestie eu massa. Vivamus nec ipsum viverra augue aliquet bibendum. Morbi ac felis purus, sed vehicula mauris. Integer tempor mollis libero id hendrerit. Fusce sit amet urna quis justo varius pulvinar dapibus sed metus.</p>
                <p>Ut vel mauris eu velit fringilla lobortis. Phasellus accumsan sem in nisl luctus gravida. Vestibulum vitae scelerisque eros. Nullam id leo erat, et congue elit. Nunc volutpat justo tempor magna pretium adipiscing. Vivamus eget massa odio. Suspendisse potenti. Aliquam erat volutpat. Proin faucibus leo vel sem lobortis sed hendrerit diam suscipit. Maecenas dignissim, neque sit amet tristique pulvinar, ipsum orci porttitor odio, ac auctor nunc mauris ac nisi. Sed vitae dui et urna mollis elementum et id purus. Suspendisse bibendum quam id lacus condimentum ut pharetra orci mollis. Curabitur et consequat nisi. Suspendisse dictum luctus neque, id tincidunt justo rutrum non. Aenean fringilla quam ac magna ornare vehicula.</p>
            </div>
            <div id="sidebar" class="span2">
                <h2>Sidebar</h2>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Morbi ac felis purus, sed vehicula mauris.</p>
                <h2>Contact Us</h2>
                <p>Morbi ac felis purus, sed vehicula mauris.</p>
            </div>
             <div id="nav" class="span2">
                 <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Friends</a></li>
                  </ul>
            </div>
        </div>
    </div>
    </body>
</html>

body{

}

.header
{
    background: #ff6600;
    padding:20px;
}

.page-content{
    margin-top:20px;
}
#nav ul {
    background: none repeat scroll 0 0 #A7DBD8;
    color: #333333;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 20px;
}

#content
{
    background: none repeat scroll 0 0 #E0E4CC;
    color: #333333;
    margin-left:0px;
    padding:20px;
}

#sidebar
{
    background: none repeat scroll 0 0 #69D2E7;
    color: #FFFFFF;
    padding:20px;
}

Answer 1

I don't get the down votes for this question, it seems like a reasonable problem to me, and something that is actually quite easy to solve within Bootstrap.

Check this out: http://jsfiddle.net/panchroma/MzaTV/

The important bit is that I added the nav div before the main content div and added float right. That's basically it.

I've used this before and what I really like is that it's such a clean solution to the problem of changing the order of the divs because at viewports < 768px, the Bootstrap grid collapses to a single column and the float right basically has no effect, so the nav div is then displayed befor the main content (in this case)

CSS

#nav.span2{
float:right;
}  

HTML

<div class="container">
<div class="row">
        <div class="header">
       ...
        </div>
    </div>
<div class="row page-content">

        <div id="nav" class="span2">
             ...
        </div>


        <div id="content" class="span7">                
            ...
        </div>

        <div id="sidebar" class="span2">
            ...
        </div>

   </div>
</div>