javascript - Bootstrap : How do i create responsive div columns in the small screens with or without media queries?

Question

在小屏幕上，div1 和 div2 并排重叠显示，我希望首先显示 div1 内容，然后在 div1 下方显示 div2 内容。使用或不使用媒体查询如何实现这些要求？

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

这样，在 >= 768px 的视口(viewport)，它们将并排显示，在 767px 及以下，它们将一个显示在另一个下方。

如对 OP 的评论中所述，请参阅文档，其中对此进行了更详细的介绍:http://getbootstrap.com/css/#grid