html - 设计 div 并排出现，并在空间不足时堆叠

Question

我不是设计师，也不擅长 CSS，但我确信 boostrap 有能力帮助我解决这个问题(尤其是跨浏览器)。本质上我希望能够创建以下情况

DIV-1           DIV-2
DIV-3           DIV-4
DIV-5           DIV-6

当有足够的空间容纳两列 div 时(每个 div 将具有固定宽度)。当没有足够的空间将它们堆叠在一列中时:

DIV-1           
DIV-2
DIV-3           
DIV-4
DIV-5           
DIV-6

提前致谢

Answer 1

对于 BS3 你会想使用这个:

<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1
        </div>
        <div class="col-md-6">Column 2
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">Column 3
        </div>
        <div class="col-md-6">Column 2
        </div>
    </div>
</div>

您可以将 6 更改为 12 但 col-md- 的总和必须加起来为 12

随着可用屏幕宽度的变化，列将进行调整以匹配(6 为 width:50%)