Using CSS, how to I change the vertical order of div blocks?

Question

I've got a header/logo with div blocks on the right and left:

  .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>

I styled it with 30%, 40%, 30% width and each has float:left to give the results I need. On reduced screen size, I give each div box 100% width so they stack. But because I want the logo box at the top, I give the style.

That brings the header to the top but the header-left-box also stays at the top, under the header. How can I arrange those as needed without them overlapping?

Answer 1

You can achieve this with flex. For the reduced screen size you can use this aditionally

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

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