Comment puis-je changer de Bootstrap 3 ordre des colonnes mobiles de mise en page?

Je suis en train de faire un réactif de mise en page avec un haut fixe barre de navigation. En dessous j'ai deux colonnes, l'une pour une barre latérale (3), et un pour le contenu (9). Qui sur le bureau ressemble à ça

barre de navigation

[3][9]

Quand je resize pour mobile le navbar est compressé et cachés, puis la barre latérale est empilées les unes sur les contenus, comme ceci:

barre de navigation

[3]

[9]

Je voudrais que le contenu principal en haut, donc j'ai besoin de changer l'ordre sur mobile à ceci:

barre de navigation

[9]

[3]

J'ai trouvé cet article qui couvre les mêmes points, mais l'on a accepté la réponse a été édité pour dire que la solution ne s'applique qu'à la version actuelle de Bootstrap.

Comment puis-je réorganiser ces colonnes sur mobile? Ou sinon, comment puis-je obtenir le sidbar liste-groupe dans ma expansion de la barre de navigation?

Voici mon code:

<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">Brand Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active"><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
InformationsquelleAutor user3000310 | 2013-11-24