ml92 ml92 - 2 months ago 6
Sass (Sass) Question

Why I can't to order divs in block container

I have one container with display block, inside them I have 3 divs, now I wan't toorder them like I coded, but that's not possible,because my container div is display block, and not displat flex.

In my case, I wan't 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>