在较小的屏幕上重新排列引导程序列

Question

我正在使用以下布局。

它的代码如下：

<div className="row">
  <div className="col">
    A
  </div>
  <div className="col-6">
    <div className="row h-50">
      B
    </div>
    <div className="row h-50">
      C
    </div>
  </div>
  <div className="col text-center my-auto">
    D
  </div>
</div>

我希望在较小的屏幕上重新排列它，使其看起来像：

我在Bootstrap中研究了pull和push，但是当您只有一行和一列时，我看到的所有示例都涉及到。我可能想得太多，但由于B和C嵌套在另一行中，所以我似乎不知道该怎么办。

Answer 1

这只能通过重复第一个div'A'并在小尺寸col-sm上切换可见性来实现；

下面的工作代码段：

.classA {
  background: red
}

.classB {
  background: yellow
}

.classC {
  background: green
}

.classD {
  background: blue
}

div{ text-align:center; }

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


<div class="row">
  <div class="col-12 col-sm-3  d-none d-sm-block classA">
    A (original)
  </div>
  <div class="col-12 col-sm-6">
    <div class="row">
      <div class="col-12 h-50 classB">
        B
      </div>
      <div class="col-12 d-block d-sm-none classA">
        A
      </div>
      <div class="col-12 h-50 classC">
        C
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-3  classD">
    D
  </div>
</div>