Bootstrap vertical aligned without breaking the grid - html

Question

I been trying all the different options that I found to vertically align a grid. Because of the layout that I have none of them worked.
This is what I have to do: for COL-MD and COL-LG the layout should be:
DIV1-IMG DIV2-TEXT
DIV3-TEXT DIV4-IMG
In this case the DIV-TEXT has to be vertically aligned.
For COL-SM and under, the layout should be:
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
The problem is that if I set the div to display:table and its variants, the grid breaks and it doesn't resize to col-xs.
Here I set up the example in case you can see what I am trying to accomplish: http://www.bootply.com/nCIExg8DkM
Any ideas on how one can align the text vertically without breaking the grid?
Thanks!

Answer 1

Use media queries to reduce the coverage area of your style: #media (min-width: 992px) {}.
Use .col-md-push-6 and .col-md-pull-6 modifier classes to change the order of your columns.
Simplify classes:
col-xs-12 col-lg-6 col-md-6 is equal to col-md-6.
col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-xs-offset-1 col-xs-10 is equal to col-lg-offset-2 col-lg-8 col-xs-offset-1 col-xs-10.
Use special helpful classes:
The .img-responsive class scales the image nicely to the parent element.
The .center-block class aligns the block via margin.
Check the result: 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>