如何将4个cols变成2个cols和2个row

Question

我正努力实现如下目标。在桌面上，它将显示4列，在较小的屏幕上，它将分为2列和2行。

如何实现如上所述？

Answer 1

只需为较小的屏幕提供不同的宽度。下面将在lg屏幕上将div设置为1行4个元素宽，在较小屏幕上每行布置2行2个元素。技术上它是一行＆＃34; row＆＃34;在两个实例中都有两行，两个元素各自在较小的视口中。

发生的事情是每个列都是视口中12的一部分 - 因此通过在lg中指定3列相当于屏幕空间的3/12或25％ - 但是当视口下移到md时sm大小（基于Bootstraps媒体查询）宽度被分析为屏幕的6/12 0r 50％，并且不进入一行的div只是浮动到下一行。

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