FlexBox: как я могу фиксировать коробки один под другим

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

header{
  background: tomato;
}

section{
  display: flex
}
.main {
  background: deepskyblue;
}

.main img{
  max-width: 100%;
}

.full-width {
  background: lightgreen;
}

.main    { order: 2; flex: 3 0px; }
.aside { flex: 1 auto; }
.aside-1 { order: 1; background: gold; width: 10%} 
.aside-2 { order: 3; background: hotpink; position: relative; width: 10%}
.aside-2 > span {
    position: absolute;
    bottom: 0;
    left: 0;
}
.vertical {
  width: 15%; /* Modify this value for different screen size*/
}
/* .full-width  { order: 4; } */
/*@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}*/
body {
  padding: 2em; 
}

<div class = "wrapper">
    <header><img src = "https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width = "80px"></header>
    <section>
        <div class = "main">
        <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = "">
        </div>
        <aside class = "aside aside-1"></aside>
        <aside class = "aside aside-2"><span>Aside Right</span></aside>
    </section>
        <section>
       <div class = "main">
          <img src = "https://picsum.photos/200/300" alt = "">
       </div>
       <aside class = "aside aside-1 vertical"></aside>
       <aside class = "aside aside-2 vertical"><span>Aside Right</span></aside>
   </section>
    <section>
     <div class = "main">
          <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = "">
        </div>
        <aside class = "aside aside-1"></aside>
        <aside class = "aside aside-2"><span>Aside Right</span></aside>
    </section>

   <section class = "full-width">Full Width</section>
    <section>
        <div class = "main">
        <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = "">
        </div>
        <aside class = "aside aside-1"></aside>
        <aside class = "aside aside-2"><span>Aside Right</span></aside>
    </section>
</div>

  body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;
  flex-wrap: wrap;
  height: 100vh;*/
}

.top {
  border: 1px solid white;
  /*width: 50%;*/
  height: 10%;
  /*align-self: flex-start;*/
  text-align: center;
}

.inner-container {
  border: 1px solid white;
  /*width: 50%;*/
  height: 60%;
  display: flex;
  justify-content: space-around;
}

.center {
  /*position: absolute;*/
  width: 50%;
  min-width: 200px;
  text-align: left;
  /*align-self: flex-end;*/
}

.off-center {
  position: absolute;
  /*vertical-align: bottom;*/
  text-transform: uppercase;
  padding-left: 10px;
  width: 50%;
  min-width: 200px;
  align-self: flex-end;
  margin-left: 50%;
}


/*.center, .off-center {
  position: absolute;
}*/

.center img {
  width: 100%;
}

.off-center h2 {
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: black;
  display: block!important;
  margin: 0px;
}

.off-center p {
  font-size: 20px;
  font-family: 'aileronbold', sans-serif;
  display: block!important;
  margin: 0px;
  text-transform: none;
}

.row.subscriptionBar {
  display: flex;
  background-color: black;
  display: block;
  padding: 20px;
}

.subscriptionBar h2 {
  color: white;
}

.firstPart {
  display:
}

/*@media screen and (min-width: 769px) {
  .off-center {
    margin-left: 50%;
  }
  @media screen and (max-width: 768px) {
    .off-center {
      margin-top: 105px;
    }
  }*/

<div class = "container">
  <div class = "top"><img src = "https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width = "80px"></div>
  <div class = "inner-container">
    <div class = "center">
      <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = "">
    </div>
    <div class = "off-center">
      <h2 class = "">ArtistName 1</h2>
      <p>509476ZclHtqXy</p>
    </div>
  </div>
  <div class = "inner-container">
    <div class = "center">
      <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = ""></div>
    <div class = "off-center">
      <h2 class = "">ArtistName 2</h2>
      <p>Title lala 1</p>
    </div>
  </div>
  <div class = "inner-container">
    <div class = "center">
      <img src = "http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt = ""></div>
    <div class = "off-center">
      <h2 class = "">ArtistName 3 444</h2>
      <p>Title 093830</p>
    </div>
  </div>

</div>