Html Bootstrap4：在窄屏幕上以两行显示3列

我想创建一个分页组件，如下所示：

在大屏幕上：

|                                                       | 
| [<<]                Page # 1 of 6                [>>] |
|                                                       | 

||
| [] |
|                                                       | 

在窄屏幕上：

|                      |
|    Page # 1 of 6     | 
| [<<]            [>>] |
|                      |

||
|第1页，共6页
| [] |
|                      |

我尝试了以下方法：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-12 order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-md-3 col-xs-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-md-3 col-xs-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

废话废话
&拉阔&拉阔&拉阔；[A]
&拉阔&拉阔&拉阔；[丙]

代码笔：

但在一个狭窄的屏幕上，我看到的却是：

|                      |
|    Page # 1 of 6     | 
| [<<]                 |
|                 [>>] |
|                      |

||
|第1页，共6页
| [] |
|                      |

---

（编辑：修复了原始帖子中混合使用的

xs-12

和

xs-6

，但问题仍然悬而未决。）

更新后的-col xs-*已在Bootstrap 4中删除。使用col-*代替

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-6  order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

废话废话
&拉阔&拉阔&拉阔；[A]
&拉阔&拉阔&拉阔；[丙]

---

演示：

已更新-col xs-*已在引导程序4中删除。使用col-*代替

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-6  order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

废话废话
&拉阔&拉阔&拉阔；[A]
&拉阔&拉阔&拉阔；[丙]

---

演示：

在Bootstrap4中不再有

列xs-*

类。它们已被替换为“

col-*”

：

废话废话
&拉阔&拉阔&拉阔；[A]
&拉阔&拉阔&拉阔；[丙]

引导程序4（不再）中没有

列xs-*

类。它们已被替换为“

col-*”

：

废话废话
&拉阔&拉阔&拉阔；[A]
&拉阔&拉阔&拉阔；[丙]

这不起作用。@Udi已更新。这里的问题是它无法获取xs媒体查询。我现在已经补充了。这应该会对您有所帮助。

50%

不是一个好的解决方案。我想继续使用flexbox。例如。检查窗户宽度，精确到宽度544g，加油！col xs-*已在引导程序4中用col-*删除。这不起作用。@Udi已更新。这里的问题是它无法获取xs媒体查询。我现在已经补充了。这应该会对您有所帮助。

50%

不是一个好的解决方案。我想继续使用flexbox。例如。检查窗户宽度，精确到宽度544g，加油！col xs-*已在引导程序4中用col-*删除。谢谢！用

col-*

替换

col-xs-*

解决了这个问题-我的IDE建议

col-xs

，因为我的一个项目库中有另一个引导css。为了简洁起见，我编辑了您的答案。您还可以删除

order-1

和

order-2

，因为它们不需要。@Udi哦，是的！当我匆忙发布我的答案时，我有时会忘记最明显的事情！：-）非常感谢。用

col-*

替换

col-xs-*

解决了这个问题-我的IDE建议

col-xs

，因为我的一个项目库中有另一个引导css。为了简洁起见，我编辑了您的答案。您还可以删除

order-1

和

order-2

，因为它们不需要。@Udi哦，是的！当我匆忙发布我的答案时，我有时会忘记最明显的事情！：-）