Bootstrap：如何在帶有或不帶有媒體查詢的小屏幕上創建響應div列？

Question

在一個小屏幕上，div1和div2並排重疊顯示，我希望div1內容首先顯示，而div2內容僅顯示在div1下方。 無論是否進行媒體查詢，我如何達到這些要求？

<div class="row">

 <div class="col-xs-6" id="div1">
    test column1
 </div>

 <div class="col-xs-6" id="div2">
    test column 2
 </div>

</div>

Answer 1

將元素的類更新為：

<div class="row">

 <div class="col-xs-12 col-sm-6" id="div1">
  test column1
 </div>

 <div class="col-xs-12 col-sm-6" id="div2">
  test column 2
 </div>

</div>

這樣，在大於等於768像素的視口中，它們將並排顯示，在767像素及以下的像素中，它們將在另一個下方顯示。

如對OP的評論中所述，請參閱文檔，其中對此進行了更詳細的介紹： http : //getbootstrap.com/css/#grid