ブートストラップの列がお互いに並んでいます

Question

ブートストラップを持つ新人です。私はメインのコンテンツを左側に、サイドの列を右側に持っています。モバイルビューでは、右側の列がメインコンテンツの下に表示されます。

私がサイドカラムを試しても、メインコンテンツカラムのすぐ上にあるか、それとも右側にありますが、メインコンテンツカラムのオンタップです。

<div class="col-sm-3 col-sm-offset-1"> 
     <div class="sidebar-module sidebar-module-inset"> 
     <h4>About</h4> 
     <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Archives</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">March 2014</a></li> 
      <li><a href="#">February 2014</a></li> 
      <li><a href="#">January 2014</a></li> 
      <li><a href="#">December 2013</a></li> 
      <li><a href="#">November 2013</a></li> 
      <li><a href="#">October 2013</a></li> 
      <li><a href="#">September 2013</a></li> 
      <li><a href="#">August 2013</a></li> 
      <li><a href="#">July 2013</a></li> 
      <li><a href="#">June 2013</a></li> 
      <li><a href="#">May 2013</a></li> 
      <li><a href="#">April 2013</a></li> 
     </ol> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Elsewhere</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">GitHub</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
     </ol> 
     </div> 
    </div><!-- /.blog-sidebar --> 

<!-- I'm using ruby on rails so 'yeild' is where the main content shows --> 
<div class="col-sm-9"> <%= yield %> </div> 

これは、私はそれを得る傾けることをそのイライラようbootsrapに行うにはかなり一般的な基本的なことのように思えます。何がうまくいかない？

Here is a fiddle

Answer 1

これは正しいマークアップです。行div内の列は常にラップします。また、必要のないオフセットを使用していました。 col-xs-12を使用すると、左側のバーが下に移動するモバイル画面の全幅が使用されます。

<div class="row"> 
<!-- I'm using ruby on rails so 'yeild' is where the main content shows --> 
<div class="col-sm-9 col-xs-12"> <%= yield %> </div> 

<div class="col-sm-3 col-xs-12"> 
     <div class="sidebar-module sidebar-module-inset"> 
     <h4>About</h4> 
     <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Archives</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">March 2014</a></li> 
      <li><a href="#">February 2014</a></li> 
      <li><a href="#">January 2014</a></li> 
      <li><a href="#">December 2013</a></li> 
      <li><a href="#">November 2013</a></li> 
      <li><a href="#">October 2013</a></li> 
      <li><a href="#">September 2013</a></li> 
      <li><a href="#">August 2013</a></li> 
      <li><a href="#">July 2013</a></li> 
      <li><a href="#">June 2013</a></li> 
      <li><a href="#">May 2013</a></li> 
      <li><a href="#">April 2013</a></li> 
     </ol> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Elsewhere</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">GitHub</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
     </ol> 
     </div> 
    </div><!-- /.blog-sidebar --> 

</div>