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?

Dumpling

Can you provide a fiddle please? – Chemist

Flexbox has a order property but that's not supported in all browser. And as said above post a jsfiddle. – Interphone

Flexbox is supported in all modern browsers and in all previous versions of these browsers. It's the only logical choice here – Physic

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;
}

Shay

Flex-direction:column works perfectly if you want to align vertically. Should be the accepted answer. – Starobin

Answer 2

If I understand you correctly, I think you could utilize Flexbox. The link to a good tutorial is here. Check out the "Order" section as you can provide a numerical order of how you want them to stack.

.item {
  order: <integer>;
}

It's not supported in all older browsers.

Plectron

Answer 3

There is no need for position: absolute here, you can use Flexbox instead and change order of elements with media query Fiddle

.wrap {
  display: flex;
}
.title-area {
  flex: 4;
  background: lightblue;
}
.header-left-box,
.header-right-box {
  flex: 3;
  background: lightgreen;
}
@media(max-width: 480px) {
  .wrap {
    flex-direction: column;
  }
  .title-area {
    order: 1;
  }
  .header-left-box,
  .header-right-box {
    order: 2;
  }
}

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

Granulocyte

This is not working veritcally. The items 'flex' horizontally. – Starobin

Answer 4

Modern browsers

The best solution to this problem is to use CSS Flexbox. As you can easily check on caniuse.com it's actually supported in all new browsers (and in their previous versions too!). Thus for these browsers the complete working solution is to just add three lines of code for the mobile version:

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

.title-area {
    order: -1;
}

And adjust this accordingly for the desktop version. See this fiddle: https://jsfiddle.net/MMiszy/t4L0r15t/1/

You can learn more from the tutorial.

What if I need to support older browsers?

However, if you need to support older browsers for some reason you can still use flexbox! You can even keep on using floats for your desktop version and only adjust mobile version of your website with flexbox if you wish. In order to support older browsers use a tool named Autoprefixer. It automatically transforms your styles and changes them whenever it's possible to make them work in older browsers. For example, in this case display: flex; is changed to

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

So it works in legacy browsers too. See this fiddle for example implementation. It uses floats for the desktop and Flexbox for the mobile: https://jsfiddle.net/MMiszy/d6paasu2/3/

Pedal

Answer 5

For full support across browsers, you can do the following:

.wrap{
  display: table;
}

.header-left-box{
  width: 100%;
}

.title-area{
  width: 100%;
  display: table-header-group;
}

.header-right-box{
  width: 100%;
}

https://jsfiddle.net/iamnottony/kpmt3Ly8/6/

Dowie