Bootstrap - 将Div和Image保持在同一行的相同高度

Question

如何使用Bootstrap在左边的div和右边的图像在同一高度？它们可以在屏幕宽度变小时堆叠，但是在较大尺寸时它们需要相等。

<!-- main -->
<div id="main" class="row">
    <div class="left col-md-6">
        <h1>SCAQMD's Air Alerts lets you stay informed about air quality in your area.</h1>
        <div id="round">
            <img src="img/arrow.png" alt="arrow">
            <a href="http://aqmd.enviroflash.info/signup.cfm">Sign Up</a>
        </div>
        <div id="signup">
            <h2>SIGN UP TODAY</h2>
            <div><!-- line -->
            </div>
            <h3>to receive Air Alerts<br>Customized for you!</h3>
        </div>
    </div>
    <div class="right col-md-6">
        <img src="img/hero.jpg" class="pull-right img-responsive">
    </div>
</div>
<!-- main -->