html - 在一行中响应地重新排列列

如何在一行内对列进行响应性重新排序？我有一个网页网站，有5个部分，每个部分都有100%的宽度和高度的屏幕大小。
我在桌面上的第一部分（A和C包含background-image的图像，B是带有h1元素的div）：

 ----------------------------------------
|          |                  |          |
|          |                  |          |
|    A     |        B         |     C    |
| col-lg-3 |     col-lg-6     | col-lg-3 |
|          |                  |          |
|          |                  |          |
 ----------------------------------------

我想在小屏幕（智能手机）上有什么：

 -------------
|             |
|      B      |
|             |
 -------------
|      |      |
|      |      |
|   A  |   C  |
|      |      |
|      |      |
 -------------

我试着使用bootstrap的push和pull类，但它们破坏了我的一页布局，我想把A、B和C放在一个全屏区域内。感谢任何帮助：）非常感谢！
编辑：
以下是我的一些HTML：

<div class="row section first">
  <div class="col-sm-12 col-lg-6" id="B"><h1>Header</h1></div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6" id="A"></div>
  <div class="col-sm-6 col-lg-3" id="C"></div>
</div>

<div class="row section second">
  <div>second section content...</div>
</div>

…和我的CSS片段：

body {
  width: 100vw;
}

.section {
  height: 100vh;
}

#B h1 {
  font-family   : 'Lobster', Impact;
  font-weight   : 400;
  font-size     : 8vw;
  letter-spacing: -4px;
  position      : relative;
  top           : 30%;
  color         : #66678B;
  margin-top    : 300px;
  text-shadow   : 5px 5px rgb(226, 226, 233);
}

div#A {
  background         : url('./img/A.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-right       : -75px;
  padding-top        : 5px;
}

div#C {
  background         : url('./img/C.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-left        : -75px;
  padding-top        : 5px;
}

最佳答案

要设计此布局，可以尝试使用“移动优先”方法。也就是说，首先在小屏幕上设计布局，然后在“pull”和“push”类的帮助下设计更大的屏幕。
在这种情况下，第一个用于第二个布局：

<div class="row">
  <div class="col-sm-12"> B </div>
  <div class="col-sm-6"> A </div>
  <div class="col-sm-6"> C </div>
</div>

然后修改它以适应第一个布局：

<div class="row">
  <div class="col-sm-12 col-lg-6"> B </div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6"> A </div>
  <div class="col-sm-6 col-lg-3"> C </div>
</div>

关于html - 在一行中响应地重新排列列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31214959/