Bootstrap moves the navigation bar under other divs on large screens

Question

I am creating a responsive page using bootstrap 3.1.1 and I would like to move the navigation bar so that it is below some other sections when viewed on non-smartphone screens. See the image below for an example.

I tried to do this using bootstrap pull / push classes (see code), but I can't get the combination correctly. It displays because I intend to use a smartphone, but not larger devices.

http://www.bootply.com/118321

HTML

<div class="row">
    <div class="col-xs-12 col-sm-push-12">
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="col-sm-6 col-sm-pull-12">
            <h1>First Title Heading</h1>
        </div>
        <div class="col-sm-6 col-sm-pull-12">
            <h1>Second Title Heading</h1>
        </div>
    </div>
</div>

Answer 1

jQuery. div s, , . , , html div , .

:

if (screenSize > 1280px) $(#topnav).html('Your navbar HTML here');
else $(#bottomnav).html('Your navbar HTML here');

topnav bottomnav - div s. , , - . :

$(window).resize(function(){
 var screenSize = $(window).width();
}); 

HTML- .

Answer 2

"", "", . , . , !