css - Bootstrap 4 - 小显示屏上的列到行

Question

有一个包含 4 列和 4 行的网格。我想要发生的是在小型显示器上，第 4 列在小型显示器上变成第 5 行，而在中等 + 显示器上是第 5 行。这是一个尝试和更好地理解 Bootstrap 网格布局的宠物元素。我本质上是在为练习制作一个响应式计算器。我觉得我可以只用原始 CSS 来做到这一点，但我认为 bootstrap 必须有一些实用程序可以使这更容易。例如图像。

大格式:

小格式:

我有一个标记的开始。还有一些相关联的 CSS，但我认为它在示例中并不重要。我有几个版本，但这就是我目前所处的位置。

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">1</button>
        <button type="button" class="btn-lg btn-outline-dark">2</button>
        <button type="button" class="btn-lg btn-outline-dark">3</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">4</button>
        <button type="button" class="btn-lg btn-outline-dark">5</button>
        <button type="button" class="btn-lg btn-outline-dark">6</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">7</button>
        <button type="button" class="btn-lg btn-outline-dark">8</button>
        <button type="button" class="btn-lg btn-outline-dark">9</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-light">&plusmn;</button>
        <button type="button" class="btn-lg btn-outline-dark">0</button>
        <button type="button" class="btn-lg btn-outline-light">.</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">X</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">-</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">+</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">=</button>
      </div>
    </div>
  </div>
</div>

编辑:我只能选择一个解决方案作为答案，但 kiranvj、WebDevBooster 和 dferenc 都提供了 Bootstrap 4 发行版工作解决方案。我只能标记一个作为答案。对你们其他人没有丝毫影响。我的手被绑住了。

Answer 1

我会做这样的事情。检查全屏模式并调整为小

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
  <div class="col-12 col-sm-8">
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
  </div>
  <div class="col-12 col-sm-4 text-danger">
    <div class="row">
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
    </div>
  </div>
</div>