Bootstrap 垂直对齐而不破坏网格

Question

我一直在尝试我发现垂直对齐网格的所有不同选项。由于布局，我没有一个工作。

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

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

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

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

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 的大小。

在这里我设置了示例，以防您看到我要完成的工作：http://www.bootply.com/nCIExg8DkM

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

Answer 1

1. 使用media queries 减少您的风格的覆盖范围：@media (min-width: 992px) {}。
2. 对change the order of your columns 使用.col-md-push-6 和.col-md-pull-6 修饰符类。
3. 简化类：
   • 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。
4. 使用特别有用的类：
   • The .img-responsive class 将图像很好地缩放到父元素。
   • The .center-block class 通过边距对齐块。

查看结果：http://www.bootply.com/WEf5cQlDog

@media (min-width: 992px) {
  .vertical-middle > div {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-offset-1 col-xs-10 col-lg-offset-2 col-lg-8">
      <div class="row vertical-middle">
        <div class="col-md-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 text-center">
          <h2>Title 1</h2>                          
          <p>Text to be centered</p>
        </div>
      </div>
      <div class="row vertical-middle top-buffer">
        <div class="col-md-6 col-md-push-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 col-md-pull-6 text-center">
          <h2>Title 2</h2>
          <p>Text to be centered</p>
        </div>
      </div>
    </div>
  </div>
</div>