title: Twitter-Bootstrap - how to create this layout with column spanning two rows?
body: <p>I'd like to create a layout as shown in the diagrams. There are two challenges that I don't know how to solve about this layout:</p>
  
  <ul>
  <li><p>in <code>col-md</code>, A and D are to take up any available vertical space on the page, while B and C are arranged vertically one after the other taking as much space as required.</p></li>
  <li><p>in <code>col-sm</code>, D and A are not to be vertically aligned with B and C, but rather taking as much space as needed.</p></li>
  </ul>
  
  <p><strong>col-lg</strong></p>
  
  <p><img src="https://i.imgur.com/j6NgKcn.png" alt="col-lg"></p>
  
  <p><strong>col-md</strong></p>
  
  <p><img src="https://i.imgur.com/uny36BR.png" alt="col-md"></p>
  
  <p><strong>col-sm</strong></p>
  
  <p><img src="https://i.imgur.com/WnveODm.png" alt="col-sm"></p>