引導網格用於移動布局

Question

我有以下標記

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>
 </div>

如何使內容部分位於側欄頂部以進行移動視圖？ 例如，上述標記不適用於移動視圖（堆棧）

<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>

但我想實現以下移動視圖

<div class="col-sm-8>
  content
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  sidebar
</div>
<div class="col-sm-4">
  sidebar
</div>

我以前看過這件事，但是忘了。 感謝大家

Answer 1

經過多次嘗試后，我發現了這種方式。

我決定刪除整行並擠壓col-sm-8所有內容和col-sm-4所有側邊欄內容

<div class="col-sm-8">
 content
 content
</div>
<div class="col-sm-4">
 sidebar
 sidebar
</div>

Answer 2

您定義的列的行為對於所有顯示都相同。 如果您希望它們以不同的方式出現，則必須相應地使用它們。 CSS類名稱的sm部分告訴您如何在特定的屏幕尺寸上進行渲染。 因此，您將xs用於非常小的屏幕，將s用於小屏幕，將md用於中等屏幕，依此類推。

將標記更改為此應該可以解決問題，我總是發現最好通過更改瀏覽器大小或使用一些漂亮的瀏覽器插件來解決它。 我對列進行了一些更改，因為在我看來，您似乎希望內容和側邊欄占據移動設備上整個屏幕的寬度。

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>
 </div>

請參閱以下codepen片段以供參考： http ://codepen.io/anon/pen/VLoMML

您可以為每個引導程序支持的不同屏幕尺寸指定不同的布局，xs適用於手機，x適用於平板電腦，md適用於常規尺寸的計算機屏幕，l適用於大型顯示​​器。 該文檔確實非常全面： http : //getbootstrap.com/css/#grid