bootstrap-4 - bootstrap4 3 列大，2 列中，1 列小

Question

我有多行，其中最大断点处有 3 列，中断点处有 2 列，小断点处有 1 列。但在中间断点处，第三列出现在它自己的行中。如何获得一种环绕效果，使第一行的第三列和第二行的第一列在中断点处并排出现在一行中？和flexbox有关系吗？我不太了解flexbox。这是我的代码:

<div class="container">
 <div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">one</div>
  <div class="col-xs-12 col-md-6 col-lg-3">two</div>
  <div class="col-xs-12 col-md-6 col-lg-3">three</div>
 </div>
 <div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">one</div>
  <div class="col-xs-12 col-md-6 col-lg-3">two</div>
  <div class="col-xs-12 col-md-6 col-lg-3">three</div>
 </div>
</div>

所以我希望它看起来像:

大:
一二三
一二三

中:
一二
三一
二三

小:
一个
两个
三个
一个
两个
三

我的问题是中断点

Answer 1

请尝试以下代码。

<div class="container">
<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-4">one</div>
  <div class="col-xs-12 col-md-6 col-lg-4">two</div>
  <div class="col-xs-12 col-md-6 col-lg-4">three</div>     
  <div class="col-xs-12 col-md-6 col-lg-4">one</div>
  <div class="col-xs-12 col-md-6 col-lg-4">two</div>
  <div class="col-xs-12 col-md-6 col-lg-4">three</div>
 </div>
</div>