CSS Commenting: Use /* ... */ not //... or <!-- ... -->
The problem you're having is not related to your flex code.
The problem is you're using line comment syntax for commenting out text, and this is not valid CSS.
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
So what you're actually doing is posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.
This is why order is not working for your icon:
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.
/* stuff to be commented out */
Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.
Read more about CSS comments here:
Lastly, on a separate note:
You're placing vendor prefixed code after the standard unprefixed versions.
#container {
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
align-content: space-between;
-webkit-align-content: space-between;
}
You should consider reversing this. The unprefixed (W3C) version should go last, so it's always the preferred version in the cascade. Read more.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
