响应性布局 - 重组div

Question

有没有办法从桌面布局转到移动布局，如下图所示，使用CSS？ （响应性布局）。

在下图中，每个方格都是div，包括红色方块（匿名） 我有以下divs：{A, B, C, D, red}。

根据我的要求，无法在div（html源代码）中移动div A.我只需要渲染就可以在div B之后放置div A。

下面是您可以自己运行的示例 你也有jsfiddle：https://jsfiddle.net/tjztgn5d/

* {
  font-family: Arial;
}
#red {
  float: left;
  border: 1px solid #F00;
  padding: 10px;
}
.header {
  padding: 10px auto;
  text-align: center;
}
#A {
  float: left;
  width: 140px;
  height: 210px;
  border: 1px solid #D79B00;
}
#A > .header {
  background-color: #FFE6CC;
  border-bottom: 1px solid #D79B00;
}
#B {
  width: 140px;
  height: 188px;
  border: 1px solid #6C8EBF;
}
#B > .header {
  background-color: #DAE8FC;
  border-bottom: 1px solid #6C8EBF;
}
#C, #D {
  width: 140px;
  height: 88px;
}
#C {
  border: 1px solid #B85450;
  margin-bottom: 10px;
}
#C > .header {
  background-color: #F8CECC;
  border-bottom: 1px solid #B85450;
}
#D {
  border: 1px solid #9673A6;
}
#D > .header {
  background-color: #E1D5E7;
  border-bottom: 1px solid #9673A6;
}

<div id="A">
  <div class="header">A</div>
</div>
<div id="red">
  <div id="B" style="float:left;margin-right:10px;">
    <div class="header">B</div>
  </div>
  <div style="float:left;">
    <div id="C">
      <div class="header">C</div>
    </div>
    <div id="D">
      <div class="header">D</div>
    </div>
  </div>
</div>

关于如何在没有Javascript的情况下实现此目标的任何想法？

Answer 1

是的，这可以在不改变HTML或使用Javascript的情况下完成。诀窍是使用绝对定位。它可以在您的情况下工作，因为您仍然使用固定尺寸。

https://jsfiddle.net/anzL79py/

这是我添加的内容：

@media (max-width: 512px) {
  /* erase inline styles. dont use them anymore! */
  #B {
    float: unset !important;
    margin-right: unset !important;
  }
  #B + div {
    float: unset !important;
  }

  #A {
    position: absolute;
    left: 19px;
    top: 218px;
  }
  #B {
    margin-bottom: 230px;
  }
}

完整的片段。

＆＃13;

＆＃13;

* {
  font-family: Arial;
}
#red {
  float: left;
  border: 1px solid #F00;
  padding: 10px;
}
.header {
  padding: 10px auto;
  text-align: center;
}
#A {
  float: left;
  width: 140px;
  height: 210px;
  border: 1px solid #D79B00;
}
#A > .header {
  background-color: #FFE6CC;
  border-bottom: 1px solid #D79B00;
}
#B {
  width: 140px;
  height: 188px;
  border: 1px solid #6C8EBF;
}
#B > .header {
  background-color: #DAE8FC;
  border-bottom: 1px solid #6C8EBF;
}
#C, #D {
  width: 140px;
  height: 88px;
}
#C {
  border: 1px solid #B85450;
  margin-bottom: 10px;
}
#C > .header {
  background-color: #F8CECC;
  border-bottom: 1px solid #B85450;
}
#D {
  border: 1px solid #9673A6;
}
#D > .header {
  background-color: #E1D5E7;
  border-bottom: 1px solid #9673A6;
}

@media (max-width: 512px) {
  /* erase inline styles. dont use them anymore! */
  #B {
    float: unset !important;
    margin-right: unset !important;
  }
  #B + div {
    float: unset !important;
  }
  
  #A {
    position: absolute;
    left: 19px;
    top: 218px;
  }
  #B {
    margin-bottom: 230px;
  }
}

＆＃13;

<div id="A">
  <div class="header">A</div>
</div>
<div id="red">
  <div id="B" style="float:left;margin-right:10px;">
    <div class="header">B</div>
  </div>
  <div style="float:left;">
    <div id="C">
      <div class="header">C</div>
    </div>
    <div id="D">
      <div class="header">D</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你不使用JS的情况下，最好使用

  媒体查询中的

引导列 + Flexbox

SpringApplicationBuilder builder = new SpringApplicationBuilder(Application.class);
builder.headless(false);
ConfigurableApplicationContext context = builder.run(args);

.contain{
  max-height:800px;
}
.A{
  color:white;
  font-size:100px;
  background:red;
  height:100vh;
  border:10px solid white;
}
.B{
  color:white;
  font-size:100px;
  background:green;
  height:100vh;
  border:10px solid white;

}
.C{
  color:white;
  font-size:100px;
  background:blue;
  height:50vh;
    border:10px solid white;

}
.D{
  color:white;
  font-size:100px;
  background:pink;
  height:50vh;
    border:10px solid white;

}

@media only screen and (max-width: 768px) {
  .contain{
    display:flex;
    flex-direction:column;
  }
  .A{
    order:2;
    border:0px;
  }
  .B{
    order:1;
    border:0px;
  }
  .three{
    order:3;
    border:0px;
  }
}