Why are some of my CSS rules not working?

Solution 1:

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:

• 4. Syntax and basic data types > Section 4.1.9 Comments ~ W3C
• Is it bad practice to comment out single lines of CSS with //?
• Do double forward slashes direct IE to use specific css?
• Single Line Comments (//) in CSS ~ Tab Atkins, Jr., CSS Working Group

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.