Why are some of my CSS rules not working?

I have a nested flexbox layout (using bootstrap v4) which changes orientation according to landscape / portrait mode. A first level div (which is placed by flexbox using the order property), #no, holds 5 icons which serve as buttons. The order property doesn't work as I expect on these icons.

If I don't use an order property, the icons are laid out in the natural order; however, if I try to use the order property to lay them out, it doesn't work. In the code, the info-div (order:3) should be the last element. It isn't. I can get the order I want by changing order in the source; however, I would like to clarify my misunderstanding.

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portrait of New York</title>
      <style>
        html, body {
              width:100%;
              height:100%;
        }
        #container {
          height: 100%; width:100%;
          display: flex;    display: -webkit-flex;
          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;
        }
        #no {
          padding: 1rem;
          display: flex; display: -webkit-flex;
          flex-wrap: nowrap;       -webkit-flex-wrap: nowrap;
          justify-content: space-between; -webkit-justify-content: space-between;
          align-items: center;   -webkit-align-items: center;
          align-content: space-between;   -webkit-align-content: space-between;
          flex: 1 1 auto; -webkit-flex: 1 1 auto;
        } 
        .icon {
          margin: auto;
          flex-grow:1;
          flex-basis: auto;
        }
        button:ACTIVE { // feedback on touch modal
          background: aqua;
        }       
        // next is for images
        .img { width: 8vmin; }
        // stuff living in #no
        #info-div1 {
          order: 3;        -webkit-order: 3;
        }
        #minus {
          order: 0;        -webkit-order: 0;          
        }
        #hb2 {
          order: -1;        -webkit-order: -1;
        }
        #plus {
          order: 1;        -webkit-order: 1;
        }
        #comment-button-div {
          order: 2;        -webkit-order: 2;
        }
      @media screen and (orientation: landscape ){
        #container { 
          flex-direction: row; -webkit-flex-direction: row;
        }
        #no { 
          flex-direction: column; -webkit-flex-direction: column;
          height: 100%;
          max-width: 10rem;
          order: 0;        -webkit-order: 0; 
        }
      }
      @media screen and (orientation: portrait ){
        #container { 
          flex-direction: column; -webkit-flex-direction: column;
        }
        #no {      
          flex-direction: row;   -webkit-flex-direction: row;
          max-height:10rem;
          width:100%;
          order: 2; -webkit-order: 2; 
        }
      }
   </style>
    <script src="https://www.google.com/recaptcha/api.js"
        async defer>
    </script>

 </head>

  <body>
    <div id="container">
      <div id='no'>

        <div id='minus' class="icon" title="Not special.">
          <a href="#" id="nHeart"  >
            <img class="img icon" src="http://gps-photo.org/images/Not.svg"/> 
          </a>
        </div>

        <div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
          <div class="dropdown">
            <img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg"  id="dropdownMenu1" 
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
            <div class="dropdown-menu">
              <a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a>
              <a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a>
              <a class="dropdown-item cmore" data-toggle="modal" href="#myModal">
              </a>
              <a class="dropdown-item cpony" data-toggle="modal" href="#myModal">
              </a>
              <a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
            </div>
          </div>
        </div><!-- end hb2 -->
        <div id='plus' class="icon" title="Loving it!">
          <a href="#" id="heart1" >
            <img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/>
          </a>
        </div> 

        <div id='comment-button-div' class="icon" title="Click for comments">
          <a class="comment-page" data-toggle="modal"  >
            <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/>
          </a>
        </div>

        <div id='info-div1' class="icon" title='Information' >
          <a class="info-page" data-toggle="modal" >
            <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/>
          </a>
        </div>

      </div>
    </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>


 </body>
</html>

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.