html - 在窗口调整大小时移动 div

Question

我想将 divA 重新定位到 divB 下方，但我就是做不到。我试过使用 float，它似乎是解决这个问题的方法，但它仍然不起作用。

这是我的 CSS 代码:

.tweet-box{
  position:fixed;
  top: 140px;
  left: 75px;
  float: left;
  width:100%;
}

HTML:

<div id="logo"></div>    
<div id="div1">
Some content
</div>
<div id="div2">
Some content
</div>

例子:

Answer 1

您必须将 #div1 和 #div2 包装在一个共同的父级中，使用 display:flex 并在设备下方指定不同的顺序您选择的宽度(下例中的 768px):

.reorder-wrapper {
  display: flex;
}
#div1, #div2 {
  border: 2px solid red;
  flex-grow: 1;
  margin: 5px;
  padding: 5px;
}
#logo {
  text-align: center;
}

#div2 {
    order: -1;
  }
@media (max-width: 768px) {
  .reorder-wrapper {
    flex-direction: column;
  }
  #div2 {
    order: 1;
  }
}

<div id="logo">This is logo</div>
<div class="reorder-wrapper">
  <div id="div1">
    Some content: #div1
  </div>
  <div id="div2">
    Some content: #div2
  </div>
</div>

注意:这不是唯一的方法，根据您的需要，另一种技术可能会更好。您需要使用 Minimal, Complete and Verifiable example 更新您的问题如果您无法将上述原则应用到您的案例中。