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

Question

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 1

order is a function of display: flex. So you would need to update your 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>

Answer 2

CSS order Property

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the order property has no effect.

From: w3schools.com