title: Bootstrap 4 How to Overlap Two Divs that Stack Responsively
body: <p>I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4. </p>
  
  <p>Simply put, we want to create the layout that's executed here: 
  <a href="https://codepen.io/mediumandmessage/pen/xVeXop" rel="nofollow noreferrer">https://codepen.io/mediumandmessage/pen/xVeXop</a> </p>
  
  <p>(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)</p>
  
  <p>HTML:</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>.somesection {margin-top:50px!important;}
  body {
    font-size:17px;
    font-family:Helvetica Neue;
  }
  img {max-width:100%;}
  
  .overlay-text {
    font-size:3.5vw;
    float:right;
    width:65%; /*important*/
    bottom:21vw; /*important*/
    padding: 25px;
    background:#f7f7f7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container somesection"&gt;
    &lt;div class="row col-xs-6"&gt;  
       &lt;img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&amp;auto=compress&amp;dpr=1&amp;crop=entropy&amp;fit=crop&amp;w=1087&amp;h=725&amp;q=80"&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-3 col-sm-offset-4 overlay-text"&gt;
        This is some text that should partially overlay.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.</p>
  
  <p>I've tried screwing around with <code>absolute</code> and <code>relative</code> positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...</p>
  
  <p>If anyone out there can share any expertise here, I'd greatly appreciate it! </p>