Side bar has undefined height and misplaced image - html

Question

I'm sure I'm overcomplicating this in my head, but is the following layout possible using the standard bootstrap 3 grid system?
Header and sub header can fill 12 columns. Then Image, probably fixed height, spans 8-col then a side bar which spans 4-col. The problem is the side bar has an undefined height and the underneath of the image is content.
So far got something like:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
<div class="col-sm-8">
Content
</div>
</div>
Layout

Answer 1

According to your image
You should use the following layout (Click the "Full page" button to see it in action. Also, ignore the CSS. It's just for testing purposes):
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
[class*='col-'] > div:not(.row) {
background: #DDD;
margin: 0.25em 0;
padding: 0.5em;
text-align: center;
height: 5em;
}
.red [class*='col-'] > div:not(.row) {
background: #C55;
color: #FFF;
height: auto;
}
[class*='col-sm-4'] > div:not(.row) {
height: 9em;
}
<div class="container">
<div class="red row">
<div class="col-sm-12">
<div>HEADER</div>
</div>
<div class="col-sm-8">
<div>SUB HEADER</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div>IMAGE</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>LEFT COL</div>
</div>
<div class="col-sm-6">
<div>RIGHT COL</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div>SIDEBAR</div>
</div>
</div>
</div>
Essentially you want a nested row with 6 wide columns for a 12 column grid layout.

Answer 2

Bootstrap row has only twelve spans. I see that 8 + 4 + 8 = 20 > 12, so the "content" div will be at a new line...
And you can't put col-sm-x with col-md-x in the same row...
My suggestion: split into two rows
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
<div>
<div class="col-sm-8">
Content
</div>
</div>
But If you want all of it in the same row:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-5">
image
</div>
<div class="col-md-2">
Navigation down right
</div>
<div class="col-md-5">
Content
</div>
</div>
And if you want a side section, you can cascade rows:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
Image
</div>
</div>
<div class="row">
<div class="col-md-12">
Content
</div>
</div>
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>