Css 在响应式设计中，如何将多个子图元锚定到父图元的底部？

我有一个父元素，它具有bootstrap3的

.row

CSS类。在这个元素中有两个子元素（每个都有一个引导列类），其中一个根据填充它的数据具有不同的高度。在我正在使用的设计中，此行中的元素需要锚定到父元素的底部

关键在于（正如bootstrap的标题和用法所暗示的）这需要有响应性。因此，子元素的绝对位置为

底部：0px不是一个选项

以下是html的当前结构：

<div class="row r4">
    <div class="col-md-2">
        <div class="bottom">
            <div data-bind="text: description()"></div>
            <span data-bind="text: metric()"></span>
        </div>
    </div>
    <div class="col-md-8">
        <div class="bottom">
            <div data-bind="foreach: keyLabels()">
                <div class="key-color">
                    <div data-bind="attr: {class: color + ' color-value'}"></div>
                    <div data-bind="text: label"></div>
                </div>
            </div>
        </div>
    </div>
</div>



我做了一些研究，还没有找到一个可靠的方法来解决这个问题，使用纯HTML/CSS解决方案

我可以想出一些相当直截了当的方法（尽管有些老套）来解决JS的问题，但是现在我想用可能的方法来避免这种情况

有什么想法吗？
这里有一个简化版的标记，可以帮助您更轻松地再现问题：



那么我们如何将每一列垂直对齐到底部呢？见：

。拉底{
显示：内联块；
垂直对齐：底部对齐；
浮动：无；
}

您能否将您的示例作为JSFIDLE发布，以便我们可以看到它实际呈现？如果使用col md-而不是col xs，则此解决方案没有响应性。看看有什么建议可以让它更具响应性吗？