title: Using Bootstrap to make a grid element automatically fill the parent div
body: <p>I'm trying to achieve a dynamic layout option for a site, but I can't nail down how to make this work. The effect I'm trying to create should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4cN0k.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4cN0k.jpg" alt="example.jpg"></a></p>
  
  <p>Where:<p>"1" will have text, and have a dynamic height;
  <p>"2" will have a background color and also fill the containing div below it, with a small vector image centered horizontally and vertically. I want to use a dynamic height on this so no matter how much text is in "1", it fills the rest of the bottom of this container;
  <p>"3" is an image (img-responsive) that fills the right half of the container. It will be what sets the height of the container div, with the possibility of different sized images being implemented.
  <p>
  I want these to display as shown on desktop browsers and landscape tablets, but to fall into a single column when its viewed on a smaller screen format.
  <p>
  I'm currently using two col-md-6 for each of these, and had the desired background color on the container. The problem I'm running into with bootstrap is when the screen is between 992px and 1200px, the content is collapsing to a smaller screen size, but it is making the bottom of "2" extend beyond the bottom of "3".
  <p>
  I've tried using flexbox for this, but when I use it in conjunction with col-md-6, it doesn't collapse to the single column on the smaller screen sizes. It also just doesn't seem to work too nicely with bootstrap 3. 
  <p>
  I'm open to any type of solution outside of completely taking out bootstrap. Thank you all so much for your time and assistance!
  <p>
  <b>EDIT 1:</b>
  <p>
  Totally forgot to add the code. What I have so far is as follows:
  <p>
  <a href="https://jsfiddle.net/b86k1myr/" rel="nofollow noreferrer">https://jsfiddle.net/b86k1myr/</a></p>
  
  <pre><code>&lt;div&gt;
  </code></pre>
  
  <p><p>
  It's kind of wonky because bootstrap isnt also enabled. But that's what I have for that so far. The other attempt with flexbox is as follows:
  <p>
  <a href="https://jsfiddle.net/mkg73uvk/" rel="nofollow noreferrer">https://jsfiddle.net/mkg73uvk/</a></p>