Bootstrap 3 将文本与 Div 底部对齐

我正在尝试在 Bootstrap 中进行如下设置，其中文本与图像底部对齐：

================================================
|                                              |
|    ####################                      |
|    ##THIS IS AN IMAGE##                      |
|    ####################   ...And some text!  |
|                                              |
================================================

所以我尝试了这个：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

但我最终得到的结果看起来更像这样，其中文本顶部对齐：

================================================
|                                              |
|    ####################  ...And some text!   |
|    ##THIS IS AN IMAGE##                      |
|    ####################                      |
|                                              |
================================================

我尝试了一些定位技巧来让它工作，但是当我这样做时，它破坏了 Bootstrap 的移动优先性。当折叠到手机大小时，我需要它来对齐：

==========================
|                        |
|  ####################  |
|  ##THIS IS AN IMAGE##  |
|  ####################  |
|                        |
|   ...And some text!    |
|                        |
==========================

因此，将其作为表格确实不是一个选择。

EDIT:这是一个小提琴，由 Joseph Marikle 在评论中提供：Dhttp://jsfiddle.net/6WvUY/1/ http://jsfiddle.net/6WvUY/1/

我认为最好的选择是使用绝对定位和相对定位的组合。

这是一个小提琴：http://jsfiddle.net/PKVza/2/ http://jsfiddle.net/PKVza/2/

给定你的html：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

使用以下 CSS：

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

编辑 - 修复了 CSS 和 JSFiddle 以实现移动响应，并将 ID 更改为类。