Bootstrap4:在窄屏幕上两行显示3列

Question

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

在宽屏幕上：

|                                                       | 
| [<<]                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在最初的帖子中混在一起，但问题仍然没有解决。)

Answer 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类。

Answer 2

更新的-col*已被丢弃在Bootstra4中。使用-*代替。

<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