Html 如何使用BS4将移动屏幕上的2行（每行3列）拆分为3行（每行2列）

我在桌面视图中有2行3列，如下所示：

    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>

<div class="row">
  <div class="col-xs-6">
    1
  </div>
  <div class="col-xs-6">
    2
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3
  </div>
  <div class="col-xs-6">
    1
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    2
  </div>
  <div class="col-xs-6">
    3
  </div>
</div>

1.
2.
3.
1.
2.
3.

我希望它们在移动设备上自动分成3行2列，如下所示：

    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>

<div class="row">
  <div class="col-xs-6">
    1
  </div>
  <div class="col-xs-6">
    2
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3
  </div>
  <div class="col-xs-6">
    1
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    2
  </div>
  <div class="col-xs-6">
    3
  </div>
</div>

1.
2.
3.
1.
2.
3.

bs4中是否有一个预定义的方法来实现这一点，或者只有CSS可以实现这一点我不想使用js，因为有太多的行和列具有不同的ID和类。谢谢

试试这个

您可以在单个

行中使用
col
div项

col-xs-*
已在引导程序4中删除，取而代之的是
col-*

将
col-xs-6
替换为
col-6
，它将按预期工作

桌面视图

移动视图


有关的更多信息

1.
2.
3.
1.
2.
3.

1.
2.
1.
2.
1.
2.
使用
col-6
而不是
col-xs-6
。然后将每个
col
div添加到单个
行中。