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

Question

有一个4列4行的网格.我想要发生的是在一个小显示屏上,第4列在小显示屏上变为第5行,而在显示屏上显示第4列.这是一个宠物项目,可以更好地尝试和理解引导网格布局.我基本上是为练习制作一个响应计算器.我觉得我可以用原始的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>

Answer 2

我认为最简单的标记是下面的标记。它还使用Order 类，但不是显式设置每个按钮的顺序，而是仅触及最后一列中的“额外”按钮.order-last .order-sm-0。

<div class="container">
    <div class="row justify-content-center">
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">1</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">2</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">3</button>

        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">X</button>

        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">4</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">5</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">6</button>

        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">-</button>

        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">7</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">8</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">9</button>

        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">+</button>

        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">&plusmn;</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">0</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">.</button>
        
        <!--
        Use `col-12 col-sm-3` in case you want a full-width `=` button 
        In that case you could omit `.justify-content-center` at the wrapper
        -->
        <button type="button" class="col-12 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">=</button>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>