After using Bootstrap to create a multi-row, multi-column site, I encountered an issue with resizing on mobile devices. The divs misalign, stack on top of each other, content disappears, and images flatten to the point of invisibility. How can I maintain the layout on large and medium screens while ensuring proper stacking on smaller screens?
Take a look at one of the rows:
<div class="row row1">
<div class="col-xs-12 col-sm-6 col-lg-5 row1-topleft">
<div class="inside-index">
<h2>one header</h2>
<p>content</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-7 row1-topright">
<div class="inside-index-img">
<img src="http://placehold.it/900x1200">
</div>
</div>
</div><!-- end row1 -->
Here's a snippet of the CSS being used for this issue:
html, body {
height: 100%;
}
div {
height: 100%;
}
.row1 {
height: 120%;
}
For a visual representation of the problem, check out this Fiddle with the entire site recreated.