title: A responsive two column layout using flexbox
body: <p>I have a two-column layout with bottom-aligned images and top-aligned captions. It works without using any JavaScript but I feel that structurally, text should be in the same cell as the image instead of on the next row. This would allow me to create a one-column on mobile without any extra markup.</p>
  
  <p>How can I achieve it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Global */
  *{
    margin:  0;
    padding:  0;
  }
  
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after{
    box-sizing: inherit;
  }
  
  html, body{
    width:  100%;
    height:  100%;
    font-family: sans-serif;
  }
  
  img{
     display: block;
     width:  100%;
     height:  auto;
  }
  
  .left-col{
     width: 66.6%;
     background:  pink;
     padding-right: 30px;
  }
  
  .right-col {
     background:  mintcream;
     width: 33.3%;
     padding-left: 30px;
  }
  
  /* Site */
  .site{
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    width:  90%;
    left:  50%;
    transform:  translateX(-50%);
    border: 1px solid grey;
  }
  
  .site .left-col, .site .right-col{
     flex: 1 0 auto;
     display: flex;
     flex-flow: column nowrap;
  }
  
  .site .item {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;section class='site'&gt;
        &lt;section class="left-col"&gt;
           &lt;section class="item"&gt;&lt;img src="http://dazedimg.dazedgroup.netdna-cdn.com/786/azure/dazed-prod/1200/8/1208983.jpg" alt=""&gt;&lt;/section&gt;
           &lt;section class="item"&gt;One line of text&lt;/section&gt;
        &lt;/section&gt;
        &lt;section class="right-col"&gt;
           &lt;section class="item"&gt;&lt;img src="http://dazedimg.dazedgroup.netdna-cdn.com/1280/azure/dazed-prod/1200/8/1208984.jpg" alt=""&gt;&lt;/section&gt;
           &lt;section class="item"&gt;Multiple&lt;br&gt;lines &lt;br&gt;of&lt;br&gt;text&lt;/section&gt;
        &lt;/section&gt;
     &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>