CSS Comments: Use /* ... */ for Effective Code Organization
The issue you're facing is not with your flex code.
Your problem lies in using // line comment syntax for commenting, which is not considered valid CSS.
button:HOVER { // hover effect
background: lavender;
}
// styling images below
.image { width: 10vmin; }
By utilizing the incorrect commenting method, instead of simply commenting out the line, you are triggering CSS error handling, resulting in the subsequent rule being disregarded. Essentially, any declaration following your // descriptive text here is overlooked, akin to including: yheight: 60px.
Hence, the reason why the order property fails for your icon:
// defining elements within #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
Stick to the conventional approach of CSS comments by commencing a comment with /* and concluding it with */.
/* content to be concealed */
Upon rectifying the code adjustments, the order attribute will operate seamlessly (leading to other modifications due to previously unacknowledged code). For a revised demo, click here.
Further insights on CSS comments can be explored at these resources:
Finally, as an additional point:
You are positioning vendor-prefixed parameters after the standard non-prefixed equivalents.
#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;
}
Consider reversing this sequence. Place the unprefixed (W3C) variant last to ensure its preference in the cascade. Learn more here.