Nested flexbox

by lenb

HTML

<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>
  <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>

CSS

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> .h2,
   h2 {
     text-align: center;
   }
   
   h1 {
     text-align: center;
   }
   
   .alert {
     display: none;
     text-align: center;
     position: absolute;
     top: 50%;
     left: 25%;
     z-index: 5000;
   }
   
   .message {
     display: none;
   }
   
   #removal {
     border-color: black;
     border-top: 10rem;
   }
   
   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;
     }
 ...