ml92 ml92 - 2 months ago 7
CSS Question

Why is order property not working on divs in block container?

I have one container with

display: block
. Inside them I have 3 divs. Now I wan't to order them like I coded, but that's not possible, because my container div is
display: block
, and not
display: flex
.

In my case, I want 3 divs to be one below the other. That's reason why I put block.

Here is JSFIDDLE demonstrated, what I tried to solve my problem.
https://jsfiddle.net/u441j2rv/1/

HTML

<div id="blockContainer">
<div>Block A</div>
<div>Block B</div>
<div>Block C</div>
</div>


CSS

#blockContainer{
display: block;
}
#blockContainer div:nth-of-type(1){
background:red;
-webkit-order: 3;
order:3;
}
#blockContainer div:nth-of-type(2){
background:green;
-webkit-order: 1;
order: 1;
}
#blockContainer div:nth-of-type(3){
background:blue;
order: 2;
order: 2;
}

Answer

order is a function of display: flex. So you would need to update you code like below.

#blockContainer {
  display: flex;
  flex-direction: column;
}
#blockContainer div {
  flex: 1;
}
#blockContainer div:nth-of-type(1) {
  background: red;
  -webkit-order: 3;
  order: 3;
}
#blockContainer div:nth-of-type(2) {
  background: green;
  -webkit-order: 1;
  order: 1;
}
#blockContainer div:nth-of-type(3) {
  background: blue;
  -webkit-order: 2;
  order: 2;
}
<div id="blockContainer">
  <div>Block A</div>
  <div>Block B</div>
  <div>Block C</div>
</div>