<header>
  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</header>
<div id="inner">
  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
  <span class="date">1:32 PM - 12 Jan 2018</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="Retweets">
      <strong>107</strong> Retweets
    </div>
    <div class="likes">
      <strong>431</strong> Likes
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">Share</button>
    <button class="retweet-btn">Retweet</button>
    <button class="like-btn">Like</button>
  </div>
</footer>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

<div id="box-container2">
  <div id="box-12"></div>
  <div id="box-22"></div>
</div>

<div id="box-container3">
  <div id="box-13"></div>
  <div id="box-23"></div>
</div>

<div id="box-container4">
  <div id="box-14"></div>
  <div id="box-24"></div>
</div>

<div id="box-container5">
  <div id="box-15"><p>Hello</p></div>
  <div id="box-25"><p>Goodbye</p></div>
</div>

<div id="box-container6">
  <div id="box-16"></div>
  <div id="box-26"></div>
  <div id="box-36"></div>
  <div id="box-46"></div>
  <div id="box-56"></div>
  <div id="box-66"></div>
</div>

<div id="box-container7">
  <div id="box-17"></div>
  <div id="box-27"></div>
</div>

<div id="box-container8">
  <div id="box-18"></div>
  <div id="box-28"></div>
</div>

<div id="box-container9">
  <div id="box-19"></div>
  <div id="box-29"></div>
</div>

<div id="box-container10">
  <div id="box-110"></div>
  <div id="box-210"></div>
</div>

<div id="box-container11">
  <div id="box-111"></div>
  <div id="box-211"></div>
</div>

<div id="box-container12">
  <div id="box-112"></div>
  <div id="box-212"></div>
</div>

  header {
    display: flex;
/*     flex-direction: row; */
  }
  header .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
  header .profile-name {
    display: flex;
    margin-left: 10px;
    flex-direction: column;
     justify-content: flex-start;
  }
  header .follow-btn {
    display: flex;
/*     align-items: center; */
    margin: 0 0 0 auto;
  }
  header .follow-btn button {
    border: 0;
    border-radius: 3px;
    padding: 5px;
  }
  header h3, header h4 {
    display: flex;
    margin: 0;
  }
  #inner p {
    margin-bottom: 10px;
    font-size: 20px;
  }
  #inner hr {
    margin: 20px 0;
    border-style: solid;
    opacity: 0.1;
  }
  footer {
    display: flex;
/*     flex-direction: row; */
  }
  footer .stats {
    display: flex;
    font-size: 15px;
  }
  footer .stats strong {
    font-size: 18px;
  }
  footer .stats .likes {
    margin-left: 10px;
  }
  footer .cta {
    margin-left: auto;
  }
  footer .cta button {
    border: 0;
    background: transparent;
  }  



#box-container {
    height: 500px;
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;

  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }


  #box-container2 {
    display: flex;
    height: 500px;
    flex-direction: row-reverse;
  }
  #box-12 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-22 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }

  #box-container3 {
    display: flex;
    height: 500px;
    flex-direction: column;
  }
  #box-13 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-23 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }

  #box-container4 {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;

  }
  #box-14 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-24 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }

  #box-container5 {
    background: gray;
    display: flex;
    height: 500px;
    align-items: center;
  }
  #box-15 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-25 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }

  #box-container6 {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
  }
  #box-16 {
    background-color: dodgerblue;
    width: 25%;
    height: 50%;
  }

  #box-26 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }
  #box-36 {
    background-color: violet;
    width: 25%;
    height: 50%;
  }
  #box-46 {
    background-color: yellow;
    width: 25%;
    height: 50%;
  }
  #box-56 {
    background-color: green;
    width: 25%;
    height: 50%;
  }
  #box-66 {
    background-color: black;
    width: 25%;
    height: 50%;
  }


  #box-container7 {
    display: flex;
    height: 500px;
  }
  #box-17 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    flex-shrink: 1;
  }

  #box-27 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex-shrink: 2;
  }

  #box-container8 {
    display: flex;
    height: 500px;
  }

  #box-18 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow: 1;
  }

  #box-28 {
    background-color: orangered;
    height: 200px;
    flex-grow: 2;
  }

  #box-container9 {
    display: flex;
    height: 500px;
  }

  #box-19 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis: 10em;
  }

  #box-29 {
    background-color: orangered;
    height: 200px;
    flex-basis: 20em;
  }

  #box-container10 {
    display: flex;
    height: 500px;
  }
  #box-110 {
    background-color: dodgerblue;
    flex: 2 2 150px;
    height: 200px;
  }

  #box-210 {
    background-color: orangered;
    flex: 1 1 150px;
    height: 200px;
  }

  #box-container11 {
    display: flex;
    height: 500px;
  }
  #box-111 {
    background-color: dodgerblue;
    order: 2;
    height: 200px;
    width: 200px;
  }

  #box-211 {
    background-color: orangered;
    order: 1;
    height: 200px;
    width: 200px;
  }

  #box-container12 {
    display: flex;
    height: 500px;
  }
  #box-112 {
    background-color: dodgerblue;
    align-self: center;
    height: 200px;
    width: 200px;
  }

  #box-212 {
    background-color: orangered;
    align-self: flex-end;
    height: 200px;
    width: 200px;
  }