Flexbox order + CSS counters - css

Question

Is it possible to use CSS counter in combination with flexbox order style? I want achieve an effect when counter number is the same like element order.
Counters update when some of elements have "display: none" property so I thought that maybe it works also with flexbox order.
ol {
list-style: none;
display: flex;
counter-reset: section;
}
li {
width: 50px;
height: 50px;
}
li::before {
counter-increment: section;
content: counter(section);
}
<ol>
<li style="background-color: wheat; order: 2"></li> <!-- should display 2 -->
<li style="background-color: olive; order: 3"></li> <!-- should display 3 -->
<li style="background-color: purple; order: 1"></li> <!-- should sisplay 1 -->
</ol>
https://jsfiddle.net/esx9j0hm/9/

Answer 1

After reading this MDN article I figured that you can't show css property values in content, but there's a couple of ways to do this.
1. Use data-attributes
Add data-attributes to li elements and show them in content:
ol {
list-style: none;
display: flex;
}
li {
width: 50px;
height: 50px;
}
li::before {
content: attr(data-order);
}
<ol>
<li style="background-color: wheat; order: 2" data-order="2"></li> <!-- should display 2 -->
<li style="background-color: olive; order: 3" data-order="3"></li> <!-- should display 3 -->
<li style="background-color: lightblue; order: 1" data-order="1"></li> <!-- should sisplay 1 -->
</ol>
2. Use JS
Use js to get style of li element and set it's content accordingly:
let elements = document.querySelectorAll('ol li');
Array.prototype.forEach.call(elements, function(el, i) {
let order = getComputedStyle(el)['order'];
el.textContent = order;
});
ol {
list-style: none;
display: flex;
}
li {
width: 50px;
height: 50px;
}
<ol>
<li style="background-color: wheat; order: 2"></li> <!-- should display 2 -->
<li style="background-color: olive; order: 3"></li> <!-- should display 3 -->
<li style="background-color: lightblue; order: 1"></li> <!-- should sisplay 1 -->
</ol>