Two Column Bootstrap Layout - html

Question

I have two groups, A & B. On mobile view, A sidebar will stack on top of A content. Likewise for group B. However, I'm encountering two issues w/ my two column Bootstrap layout.
Issue #1
On mobile view, Content A get's stuck behind Sidebar B. I've tried adding float classes and clearing the floats, z-index, positioning, etc., and I'm just unable to get them to stack A,B,A,B =/
Issue #2
...is that I do want the max-height to be 100%, but what I'm getting is 100% height just for group A. What methods could I use to get both groups A & B to fit (together) 100% on the page?
My code is as follows; I appreciate any and all help! Thanks a ton.
HTML
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 a">
Sidebar content A
</div>
<div class="col-sm-8">
Body content A
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 b">
Sidebar content B
</div>
<div class="col-sm-8">
Body content B
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
CSS
html,body,.col-sm-12,.container-fluid, .row {
height:100%;
}
.row > div {
height:100%;
}
.a, .b {
background-color:#e5e5e5;
}
JSFiddle
Please let me know what I'm missing.

Answer 1

You could just add
col-xs-12
to your divs to stop the weird overlap- so your html would read
<div class="col-sm-4 col-xs-12 a">
Sidebar content A
</div>
<div class="col-sm-8 col-xs-12">
Body content A
</div>
Regarding the height issue you can apply a new class to your rows and update your css as follows:
html,
body {
height: 100%;
}
.container-fluid {
height: 50%;
}
.col-sm-12,
.fullheight {
height: 100%;
}
.a,
.b {
background-color: #e5e5e5;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight a">Sidebar content A</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content A</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight b">Sidebar content B</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content B</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->