Top sabit bir gezinti çubuğu ile duyarlı bir düzen yapıyorum. İki sütun, Kenar Çubuğu (3) ve içerik (9) için bir tane var altında. Masaüstünde böyle bir şey

gezinti çubuğu
[3][9]

Ben resize navbar cep sıkıştırılmış ve gizli olduğunda, o zaman bu Kenar Çubuğu gibi içeriği üstüne yığılmış

gezinti çubuğu
[3]
[9]

Bu mobil sırasını değiştirmek istiyorum. üstündeki ana içeriği isterim:

gezinti çubuğu
[9]
[3]

Aynı noktaları kapsayan, ama kabul cevap çözüm yok Bootstrap geçerli sürümü için geçerli olduğunu söylemek düzenlendi this article buldum.

Mobil bu sütunları yeniden sıralayabilir miyim? Veya alternatif olarak, nasıl sidbar genişleyen benim gezinti çubuğu içine grup listesi alabilir miyim?

İşte benim kod:

<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-->

Olamaz daha küçük ekranlarda sütunların sırasını değiştirmek ama büyük ekranlar yapabilirsiniz.

Değiştirmek için sütun sırası.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Varsayılan olarak, bu ilk ana içeriğini görüntüler.

Bu yüzden mobil ana içerik ilk görüntülenir.

col-lg-push col-lg-pull kullanarak büyük ekran sütunları yeniden sıralamak ve sol kenar çubuğu ekran ve sağda içerik ana edebiliriz.

Çalışma fiddle here.