How to divide bootstrap col-md div to half vertically?
<p>I am trying to make below layout using bootstrap grid. There is a container <code>&lt;div class="row"&gt;</code> and half width two divs in that (<code>&lt;div1&gt; and &lt;div2&gt;</code>). The <code>&lt;div1&gt;</code>'s height would be changeable as content size. And again, the <code>&lt;div2&gt;</code> should have two child divs(<code>&lt;div2-1&gt;, &lt;div2-2&gt;</code>) that half height of <code>&lt;div1&gt;</code> each. How can I make this layout with Bootstrap grid?  </p>

<p><a href="https://i.stack.imgur.com/HyBxT.png" rel="nofollow"><img src="https://i.stack.imgur.com/HyBxT.png" alt="enter image description here"></a></p>

<p>I tried like that, but not working. : </p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6" id="div1"&gt;
        Some content...
    &lt;/div&gt;
    &lt;div class="col-md-6" id="div2"&gt;

        &lt;div id="div2-1" style="height:50%;"&gt;

        &lt;/div&gt;
        &lt;div id="div2-2" style="height:50%;"&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>