Вертикальное выравнивание двух столбцов divs в ответной сетке Bootstrap3

Question

Я хотел бы по вертикали выровнять (выравнивание по вертикали или по центру) видео в правой колонке и текст в левом столбце. Учитывая приведенный ниже код, как мне это сделать?

<div class="container"> 
    <div class="jumbotron text-center"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <h1>Heading<br>Text</h1> 
      <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p> 
      <a class="btn btn-success btn-lg" href="#">Submit</a> 
     </div> 
     <div class="col-md-6"> 
      <iframe src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe><script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script> 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 1

Мой совет должен сделать это с JQuery, вот один простое решение, жаль, что пришлось добавить несколько ID на существующий код

<div class="container"> 
<div class="jumbotron text-center"> 
    <div class="row" id="some_id"> 

    <div class="col-md-6"> 
     <h1>Heading<br>Text</h1> 
     <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p> 
     <a class="btn btn-success btn-lg" href="#">Submit</a> 
    </div> 

    <div class="col-md-6"> 
     <iframe id="iframe_id" src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe> 
     <script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script> 
    </div> 
    </div> 
</div> 

и вот скрипт JQuery:

// Vertical center 
function vericalCenter() { 
if ($('.container').width() > 969) { 
$('#iframe_id').css({ 
    "margin-top": ((($('#some_id').height() - $('#iframe_id').outerHeight())/2) + $('#some_id').scrollTop() + "px") 
    }); 
    }; 
}; 

$(document).ready(function(){ 
vericalCenter();    
}); 

$(window).resize(function(){   
vericalCenter();     
}); 

вот демо, просто помните, чтобы изменить размер результирующего кадра шире, чем 970px, чтобы видеть результат.

http://jsfiddle.net/darkosss/CzNUQ/