html - 使用 CSS，如何更改 div block 的垂直顺序？

Question

我有一个标题/ Logo ，左右两侧都有 div block :

  .wrap .title-area {
    position: absolute;
    top: 0;
    width: 100%
  }

<div class="wrap">
  <div class="header-left-box">
    <p>abcd-left box</p>
  </div>
  <div class="title-area">
    <p>abcd-header</p>
  </div>
  <div class="header-right-box">
    <p>abcd right box</p>
  </div>
</div>

我将其设置为 30%、40%、30% 宽度，并且每个宽度都有 float:left 以提供我需要的结果。在缩小的屏幕尺寸上，我给每个 div 框 100% 的宽度，以便它们堆叠。但是因为想要logo框在最上面，所以给了样式。

这将页眉带到顶部，但页眉左框也保持在页眉下方的顶部。如何根据需要安排它们而不重叠？

Answer 1

您可以使用 flex 实现这一点。对于缩小的屏幕尺寸，您可以额外使用它

.title-area {
    order: -1 //Move the title area above the others
}

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