Bootstrap4：在窄屏幕上显示两行 3 列 [重复]答案

【问题标题】：Bootstrap4: Displaying 3 columns in two rows on narrow screens [duplicate]Bootstrap4：在窄屏幕上显示两行 3 列 [重复]
【发布时间】：2018-07-24 18:46:13
【问题描述】：

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

在宽屏上：

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

在窄屏幕上：

|                      |
|    Page # 1 of 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>

Codepen：https://codepen.io/nonZero/pen/XZaxBR

但在狭窄的屏幕上我得到了这个：

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

（编辑：固定xs-12和xs-6在原帖中混在一起，但问题仍然悬而未决。）

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

Bootstrap 4（不再）中没有 col-xs-* 类。它们已被替换为 col-*:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

（注意：text-left 是不必要的，因为这是默认设置。）

此外，使用order-first 类可以取消order-1 和order-2 类。

【讨论】：

谢谢！用col-* 替换col-xs-* 解决了这个问题——我的IDE 建议col-xs，因为我的一个项目库中有另一个引导css。为简洁起见，我已经编辑了您的答案。
您也可以删除 order-1 和 order-2，因为它们不需要。
@Udi 哦，是的！在急于发布我的答案时，我有时会忘记最明显的事情！ :-)

【解决方案2】：

更新 - 在 Bootstrap 4 中删除了 col-xs-*。改用 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>

演示：https://codepen.io/anon/pen/PQKxOZ

【讨论】：

这不起作用。
@Udi 已更新。这里的问题是它没有获取 xs 媒体查询。我暂时添加了。这应该对您有所帮助。
50% 不是一个好的解决方案。我想继续使用 flexbox。
对于示例。在宽度 544 处检查窗口宽度
知道了！ col-xs-* 已在 Bootstrap 4 中使用 col-* 删除。