vertical align middle content with bootstrap 3

Question

I want to set vertical middle content in div block with latest bootstrap v3.2.0.

I have Read the answer to vertical-align with bootstrap 3, but it uses float:none; in div block.

However, I can't use float:none; in div block according to our layout.

I have this code:

<div class="container">
  <div class="col-lg-4">....</div>
  <div class="col-lg-5">....</div>
  <div class="col-lg-3">....</div>
</div>

Content Height is dynamic in block 1. I want to set vertical middle content in block 2 and 3 according to block 1 height.

This is how our layout currently looks:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |      Content     |      Content     |
|        is        |------------------ ------------------
|     Dynamic      | 
 ------------------ 

if, I will use float:none; So, This is Our layout looks:

       Block 1           Block 2        
 ------------------ ------------------ 
|  Content Height  |                  |
|        is        |      Content     |
|     Dynamic      |                  |
 ------------------ ------------------ 
       Block 3
 ------------------
|      Content     |
 ------------------

This is how I would like it to look:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |                  |                  |
|        is        |      Content     |      Content     |
|     Dynamic      |                  |                  |
 ------------------ ------------------ ------------------

Answer 1

I found the best way to achieve that is to create a table layout within the container:

Check out this fiddle: http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

The media query makes sure the content will only be a table in large displays, otherwise it will stack as it used to.