html - Bootstrap 3 Vertical Alignment Across Multiple Rows and Columns -

i new bootstrap. started project , came across challenge regarding vertical alignment bootstrap's grid system. community of experts able shed light , assist solution.

to better illustrate issue, have taken 4 screenshots (links attached @ bottom) each of lg, md, sm, , xs scenarios. hope images make sense you.

the problem is, while lg scenario looks great , aligned properly, viewport changes, content of 2 columns start show misalignment.

here html markup:

<div class="container">         <div class="row row-centered">             <div class="col-sm-6 col-md-6 col-lg-6">                  <div class="row row-centered">                     <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                         <h2>header number 1</h2>                     </div>                     <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>                 </div>                  <div class="row row-centered">                     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>                     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">                         <div>                             <p>teaser number 1 - lorem ipsum dolor sit, interdum consectetur elit. donec interdum dapibus lectus rhoncus.</p>                         </div>                     </div>                     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>                 </div>                  <div class="row row-centered">                     <div class="col-sm-6 col-md-6 col-lg-6">                         <img class="img-responsive" src="http://placehold.it/200x200&text=square" alt="">                         <h4>sub-heading short</h4>                     </div>                     <div class="col-sm-6 col-md-6 col-lg-6">                         <img class="img-responsive" src="http://placehold.it/200x200&text=square" alt="">                         <h4>sub-heading longer</h4>                     </div>                 </div>                 <div class="row row-centered">                     <div class="col-lg-12">                         <div>                             <p>link detailed page 1</p>                         </div>                     </div>                 </div>             </div>              <div class="col-sm-6 col-md-6 col-lg-6">                  <div class="row row-centered">                     <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                         <h2>header different length</h2>                     </div>                     <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>                 </div>                  <div class="row row-centered">                     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>                     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">                         <div>                             <p>teaser number 2 - lorem ipsum dolor sit amet. donec interdum dapibus lectus eu rhoncus.</p>                         </div>                     </div>                     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>                 </div>                  <div class="row row-centered">                     <div class="col-sm-6 col-md-6 col-lg-6">                         <img class="img-responsive" src="http://placehold.it/200x200&text=square" alt="">                         <h4>sub-heading different</h4>                     </div>                     <div class="col-sm-6 col-md-6 col-lg-6">                         <img class="img-responsive" src="http://placehold.it/200x200&text=square" alt="">                         <h4>sub-heading 4</h4>                     </div>                 </div>                 <div class="row row-centered">                     <div class="col-lg-12">                         <div>                             <p>link detailed page number 2</p>                         </div>                     </div>                 </div>             </div>         </div>     </div> 

i have not incorporated custom css yet except .row-centered, simple this:

.row-centered { text-align:center;} 

what should fix problem? thank much!

here screenshots: example

topgun, hi there. stay inline each other.
approach adjust title font size @ 2 media breakpoints.
can change suit suits you, went little smaller show effect here.
@ breakpoint add height value main text part have too.
used min-height here rather fixed height. because when stack on small screen text need room expand down. code had lost of divs , seemed lots of hidden block padders.

i went through , removed lot pull needed here demo.
go through code , see difference.

what added here col-xs-12 img class.
see when resized down small screen size image goes full width , not stay left big space right.
center text need use class of text-center once in each of 2 rows.

hope gets started how want now.

here fiddle.

<!doctype html>  <html lang="en">    <head>      <meta charset="utf-8">      <meta http-equiv="x-ua-compatible" content="ie=edge">      <meta name="viewport" content="width=device-width, initial-scale=1">            <meta name="description" content="">      <meta name="author" content="">      <link rel="icon" href="../../favicon.ico">        <title>starter template bootstrap</title>        <!-- bootstrap core css -->      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    <style>  body {    padding-top: 50px;  }  .spacer {    margin-top: 2%;    margin-bottom: 2%;  }    @media(max-width:1200px) {  .adjust-fontsize{      font-size:2em;      font-weight: 700;      font-weight: 600;  }  }      @media(max-width:992px) {  .adjust-fontsize{      font-size:1.0em;  }  .row-height{      min-height:70px;  }      }  </style>    </head>    <body>        <nav class="navbar navbar-inverse navbar-fixed-top ">        <div class="container">          <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">              <span class="sr-only">toggle navigation</span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>            </button>            <a class="navbar-brand " href="#">project name</a>          </div>          <div id="navbar" class="collapse navbar-collapse">            <ul class="nav navbar-nav navbar-right">              <li class="active"><a href="#">home</a></li>              <li><a href="#about">about</a></li>              <li><a href="#contact">contact</a></li>            </ul>          </div><!--/.nav-collapse -->        </div>      </nav>    <div class="container col-lg-12 spacer"></div>            <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12">                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">                            <div class="row col-lg-12">                  <h2 class="adjust-fontsize">header number 1</h2>              </div>              <div class="row col-lg-12 row-height">                  <p>teaser number 1 - lorem ipsum dolor sit, interdum consectetur elit.                   donec interdum dapibus lectus rhoncus.                  </p>              </div>                                <div class="row col-lg-12">                  <div class="col-xs-12 col-sm-6">                      <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=square" alt="">                      <h4>sub-heading short</h4>                  </div>                  <div class="col-xs-12 col-sm-6">                      <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=square" alt="">                      <h4>sub-heading longer</h4>                  </div>              </div>               <div class="row col-xs-12">                  <p>link detailed page 1</p>              </div>          </div>                                    <div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">              <div class="row col-lg-12">                  <h2 class="adjust-fontsize">header different length</h2>              </div>              <div class="row col-xs-12 row-height">                  <div class="col-xs-12">                      <p>teaser number 2 - lorem ipsum dolor sit amet.                       <br>donec interdum dapibus lectus eu rhoncus.                      </p>                  </div>                  </div>                        <div class="row col-lg-12">                  <div class="col-xs-12 col-sm-6">                      <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=square" alt="">                      <h4>sub-heading different</h4>                  </div>                  <div class="col-xs-12 col-sm-6">                      <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=square" alt="">                      <h4>sub-heading 4</h4>                  </div>              </div>              <div class="row col-xs-12">                  <p>link detailed page number 2</p>              </div>          </div>                </div><!-- /.container -->          <!-- bootstrap core javascript      ================================================== -->      <!-- placed @ end of document pages load faster -->      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>        </body>  </html>