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 для отображения: таблицы и его варианты, разрывы сетки и не изменять размер Col-хз.

Здесь я создал пример, в случае, если вы можете увидеть, что я пытаюсь сделать: http://www.bootply.com/nCIExg8DkM

Любые идеи о том, как можно выровнять текст по вертикали, не нарушая сетку?
Спасибо!

Answer 1

1. Использование media queries уменьшить зону покрытия вашего стиля: @media (min-width: 992px) {}.
2. Использование классов .col-md-push-6 и .col-md-pull-6 классов-модификаторов до change the order of your columns.
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>