What would cause bootstrap columns to act like rows? - html

Question

I cannot figure out why these column classes are not acting properly. They are vertically stacking. I am fairly new to boostrap, so I could be missing something obvious.
Any help would be appreciated. Thanks ahead of time.
HTML-
<div class="row content-container">
<div class="row top-nav">
<div class="row header">
<div class="col-lg-4 logo">
<img src="images/logo.png">
</div>
<div class="col-lg-8 nav-area">
<div class="row number">
888.888.8888
</div>
<div class="row navigation">
</div>
<div class="row heading">
</div>
</div>
</div>
<div class="row sub-nav">
</div>
</div>
<div class="row content-footer"></div>
</div>
SCSS-
.content-container{
position: relative;
background-image:url("images/border-vertical.png"), url("images/parchment-bg.jpg"), url("images/border-vertical.png");
background-position: top left, top center, top right;
background-origin: border-box, content-box, border-box;
background-repeat: repeat-y, repeat-y, repeat-y;
height: 1500px;
width: 972px;
margin: auto;
padding: 20px 56px 0 56px;
.nav-area{
position: relative;
.number{
background-image:url("images/phone-number-bg.png")
}
}
.content-footer{
background-image: url("images/border-horizontal.png");
background-repeat: repeat-x;
background-origin:content-box;
height: 31px;
width: 892px;
position: absolute;
bottom: 0px;
left: 40px;
}
}

Answer 1

First off, you don't need to put the class row in every div that contained your col-lg-*
But you can still stack them however you want though.
Example :
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
...
</div>
</div>
</div>
</div>
As for your problem, you were right about the columns breaking up when you reach the min-width of col-lg-*. This is a feature of bootstrap. This prevents your columns shrinking so much that it becomes unreadable.
You could however, add the grid classes for smaller views. Like this:
<div class="row header">
<div class="col-md-4 col-lg-4 logo">
<img src="images/logo.png">
</div>
<div class="col-md-8 col-lg-8 nav-area">
<div class="row number">
888.888.8888
</div>
<div class="row navigation">
</div>
<div class="row heading">
</div>
</div>
</div>