Nested flexbox

by lenb

HTML

<body>


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

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
   
   
   #removal {
     border-color: black;
     border-top: 10rem;
   }
   
   html,
   body {
     width: 100%;
     height: 100%;
   }
   

   
   #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;
   }
   
     #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;
     }