I have a single container with the CSS property display: block. Inside this container, there are 3 div elements. I attempted to order them as per my code, but it proved to be impossible due to the fact that the container itself is styled as display: block instead of display: flex.
In my specific scenario, I want these 3 divs to appear stacked vertically. That's why I initially used the block display.
You can view a demonstration of what I tried to achieve on JSFIDDLE: https://jsfiddle.net/u441j2rv/1/
Here is the HTML markup:
<div id="blockContainer">
<div>Block A</div>
<div>Block B</div>
<div>Block C</div>
</div>
And here is the corresponding CSS styling:
#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;
}