使2个div分别与其他2个div重叠

Question

因此，我不知道如何以这种方式使div彼此重叠，我很好奇是否有可能。如果是这样，是否还可以使用Bootstrap或其他一些库来做出类似的响应？如果是，则div完全不需要更改配置，以便内容仍然有意义吗？ （如下面的图片所示） 如果这样的事情不能发生（指的是响应能力），有没有办法使整个事情消失并显示其他东西呢？

Answer 1

有可能。使用CSS flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您将要使用CSS媒体查询来切换容器元素的弹性方向，依此类推...这是一个比javascript更与html / css相关的问题

Answer 2

这可能会给您一些起点？

您需要使用@media个查询和flex的组合。

在此处查询@media个查询：CSS @media Rule

在此处查看flex框：A Complete Guide to Flexbox

此代码可能会有帮助！ （调整输出窗口大小以查看结果）

参见此处：JSFiddle

.panel-container {
  
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.panel {
 
}

.col {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#a1 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#a2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#a3 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b1 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b2 {
  background-color: red;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#b3 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .col {
    display: flex;
    flex-direction: column;
  }
}

 <div class="container">
   <div class="col">
     <div id="a1">A1</div>
     <div id="a2">A2</div>
     <div id="a3">A3</div>
   </div>
   <div class="col">
     <div id="b1">B1</div>
     <div id="b2">B2</div>
     <div id="b3">B3</div>
   </div>
 </div>

 <div class="panel-container">
   <div id="lhs" class="panel"></div>
   <div id="rhs" class="panel"></div>
 </div>