使 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 相关的问题11=]

Answer 2

这可能会给你一个起点？

您需要结合使用 @media 查询和 flex。

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

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

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

看这里：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>

使 2 个 div 响应地与其他 2 个 div 重叠

Make 2 divs overlaping 2 other divs responsively

html

javascript

css

responsive-design

bootstrap-4