Bootstrap columns are not stacking - css

Question

In my classes .fam-col-right and .fam-col-left I am using display: table-cell; vertical-align: middle; float: none; in my css to vertically center the content I have as seen below. The .row is set to display: table;.
The problem I'm having is my columns aren't stacking at all and I'm not sure why. Here is what it looks like instead of it stacking.
How can I have my content stack and stay vertically aligned to the middle?
Here is my code:
<!-- Families -->
<div id="families">
<div class="container-fluid">
<div class="row text-center center-row">
<div class="col-md-6 col-md-push-6 fam-col-left">
<h2>Families & Individuals</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
</div>
<div class="col-md-6 col-md-pull-6 fam-col-right">
<ul class="list-unstyled">
<li><i class="fa fa-map-o fa-fw fa-1x"></i> Wealth Management</li>
<li><i class="fa fa-pie-chart fa-fw fa-1x"></i> Asset Allocation</li>
<li><i class="fa fa-anchor fa-fw fa-1x"></i> Insurance Risk Assessments</li>
<li><i class="fa fa-graduation-cap fa-fw fa-1x"></i> Education Funds Planning</li>
<li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i> Retirement Planning</li>
<li><i class="fa fa-area-chart fa-fw fa-1x"></i> Investments</li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</div> <!-- end families -->
.center-row {
display: table;
}
#families {
margin-bottom: -30px;
}
.fam-col-left {
background: url('../img/space.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 550px;
color: #FCFFF5; /*white*/
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-left p {
width: 50%;
margin: 0 auto;
}
.fam-col-right {
display: table-cell;
vertical-align: middle;
float: none;
}
.fam-col-right li {
padding-bottom: 20px;
}

Answer 1

looking for something like this? - https://jsfiddle.net/9s1e9tm0/
.center-row {
display: table;
}
#families {
margin-bottom: -30px;
}
.fam-col-left {
background: url('http://www.unoosa.org/res/timeline/index_html/space-2.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 550px;
color: #FCFFF5; /*white*/
display: table-cell;
vertical-align: middle;
float: none;
width:50%;
}
.fam-col-left p {
width: 50%;
margin: 0 auto;
}
.fam-col-right {
display: table-cell;
vertical-align: middle;
float: none;
width:50%;
}
.fam-col-right li {
padding-bottom: 20px;
}