网格元素上的垂直对齐

Question

我正在尝试垂直对齐我的网格，因此所有文本都显示为与其他网格内联。我已经设法让它在大屏幕上工作，但是当你调整浏览器窗口的大小时，它会失去垂直对齐。

我也在这里拼凑了一个CodePen，所以你可以看到我的问题：http://codepen.io/realph/pen/qLwfs

我正在垂直对齐我的网格元素：

.cover {
    height: 312px;
    display: table-cell;
    vertical-align: bottom;
    background-color: #F0D5C0;
}

这里网格元素垂直对齐。了解图像下方的所有文本块是如何相互内联的。

当您调整窗口大小时，会发生这种情况。网格元素不再垂直对齐。

感谢任何帮助。提前谢谢！