在窗口上移动div调整大小

Question

我想将divA重新定位在divB之下，但我无法得到它。我尝试使用浮动，它似乎是解决方案，但它仍然不起作用。

这是我的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更新问题。

Answer 2

创建父元素并使其显示：flex;并根据它调整弯曲方向。使用媒体查询进行响应。 .parent-div { display:flex; }