title: How to move column cell content to a new row using CSS (making an HTML grid responsive)
body: <p>I have a post grid layout that I'm trying to make responsive and am having some trouble figuring out the best approach for reorganising/reordering the content using CSS.</p>
  
  <p>The original grid looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/e8Oym.png" alt="original post layout"></p>
  
  <p>So an image on the left, that's the full height of the parent div (for which the recommendations are usually Flexbox or Absolute positioning), and then two rows in the second column for post content).</p>
  
  <p>What I'm trying to figure out is the best way to code it so I can reorder the blocks to the layout below using CSS (i.e. keeping the HTML code/structure the same):</p>
  
  <p><a href="https://i.stack.imgur.com/1Uqfr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Uqfr.png" alt="responsive post layout"></a></p>
  
  <p>Essentially, I need to figure out the best way to move block 3 (the bottom "cell" in the second column) out of the second column and onto its own new row using CSS.</p>
  
  <p>I've tried Flexbox, but can't make the structure work for both layouts. The first layout seems to require a nested column structure (the second column requiring its own div to dictate the flex-direction) and the second won't work if I have one (I can't "escape" the box 3 content from the column if it's hardcoded).</p>
  
  <p>Same thing for a table layout, the HTML has to dictate what cell goes where/rows and columns.</p>
  
  <p>The closest solution I have so far is three basic HTML divs, one on top of the other, and "absolute" positioning for box 1.</p>
  
  <p>Basic HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="box-1"&gt;
          &lt;img=full-height-image&gt;
      &lt;/div&gt;
      &lt;div class="box-2"&gt;
          &lt;post-title-and-meta&gt;
      &lt;/div&gt;
      &lt;div class="box-3"&gt;
          &lt;post-excerpt-read-more&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basic CSS (Desktop)</p>
  
  <pre><code>.container{
      position: relative;
  }
  
  .box-1{
      height: 100%;
      position: absolute;
      max-width: 33.333%;
  }
  
  .box-1 img{
      height:100%;
      object-fit:cover;
  }
  
  .box-2,
  .box-3{
      margin-left: 33.333%;
      max-width: 66.666%;
  }
  
  </code></pre>
  
  <p>Basic CSS (Responsive)</p>
  
  <pre><code>.container{
      position: relative;
  }
  
  .box-1{
      display: inline-block;
      position: relative;
      max-width: 33.333%;
  }
  
  .box-1 img{
      height:100%;
      object-fit:cover;
  }
  
  .box-2{
      display: inline-block;
  }
  
  .box-3{
      display:block;
      margin-left:0;
      max-width:100%;
  }
  
  </code></pre>
  
  <p>But this doesn't seem like a particularly elegant/foolproof approach.</p>
  
  <p>Based on what I need to do, and the "full height of parent div" image requirement, is there a better way to do this?</p>