Html 引导垂直对齐而不破坏网格

我一直在尝试所有不同的选项，我发现垂直对齐网格。因为布局，我没有他们工作

这就是我要做的：对于COL-MD和COL-LG，布局应该是：

DIV1-IMG     DIV2-TEXT
DIV3-TEXT    DIV4-IMG

DIV1-IMG
DIV2-TEXT
DIV4-IMG (if it is complicated, we can stick to first show DIV3-TEXT and then DIV-4-IMG)
DIV3-TEXT

在这种情况下，DIV-TEXT必须垂直对齐

对于COL-SM和以下，布局应为：

DIV1-IMG     DIV2-TEXT
DIV3-TEXT    DIV4-IMG

DIV1-IMG
DIV2-TEXT
DIV4-IMG (if it is complicated, we can stick to first show DIV3-TEXT and then DIV-4-IMG)
DIV3-TEXT

问题是，如果我将div设置为display:table及其变体，网格将断开，并且不会调整为col xs

在这里，我设置了一个示例，以防您看到我试图实现的目标：

有没有关于如何在不破坏网格的情况下垂直对齐文本的想法？
谢谢

用于减少样式的覆盖区域：

@媒体（最小宽度：992px）{}

使用

.col-md-push-6

和

.col-md-pull-6

修改器类来修改

简化课程：

• col-xs-12 col-lg-6 col-md-6

  等于

  col-md-6

• col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-xs-offset-1 col-xs-10

  等于

  col-lg-offset-2 col-lg-8 col-xs-offset-1 col-xs-10

使用特别有用的课程：

• 将图像精确缩放到父元素
• 通过边距对齐块

检查结果：

@媒体（最小宽度：992px）{
.垂直中间>div{
显示：表格单元格；
浮动：无；
垂直对齐：中间对齐；
}
}

标题1
要居中的文本

标题2
要居中的文本

Gleb，非常感谢。它工作得很好！关于专栏中顺序的改变，我无法让它起作用。当图像位于右分区（仅用于列sm）时，我想将其向上推，以便文本（位于左分区）位于图像后面。在这里，我留下了代码，但它不能正常工作：你能告诉我我做错了什么吗？@Gonzalo 1）按块必须站在窄屏幕上的顺序放置块。如果我理解正确，图像应该是第一个。2） 使用一对类。图像获取

col-md-push-6

类。文本得到的是

col-md-pull-6

类。我是用另一种方式做的。非常感谢你！