Bootstrap float column up to eliminate whitespace - html

Question

I am trying to create a layout that resembles the following:
Sketch mockup
The "1/3" and "2/3" labels refer to how much of the screen I want those sections to take up (on web).
I've created 2 rows (with one column and two columns, respectively) to try to produce this layout. However, since the rows stack, I end up with a bunch of whitespace, so my layout looks like this:
Current layout
How can I move up the blue area so that there is not whitespace, but it is still responsive and moves below the other areas on smaller screens?
Here is my HTML:
<div class="container-fluid">
<div class="row onethird">
<div class="col-sm-8 red">
<h1>Title:</h1>
<h1>Description of site</h1>
</div>
</div>
<div class="row twothirds">
<div class="col-sm-8 green">
<h2>pictures go here</h2>
</div>
<div class="col-sm-4 blue">
<h1>Signup form</h1>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
</div>
</div>
Here is my CSS:
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
html, body {
height: 100%;
width: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.full {
height: 100%;
}
.onethird {
height: 33.333%;
}
.twothirds {
height: 66.6666%;
}
I have tried to use CSS and height percentages to set the heights of the different sections in a responsive way. My main issue is floating that blue column up.
I have considered dividing the blue section into two different rows, but this would end up dividing the sections of the signup form on smaller screens, which I'd like to avoid.
Any help would be greatly appreciated! Thanks in advance.

Answer 1

I think the correct way of doing this is putting everything you have on the left into .col-sm-8 and everything you have on the right into .col-sm-4.
Check out the example below.
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
html, body {
height: 100%;
width: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.full {
height: 100%;
}
.onethird {
height: 33.333%;
}
.twothirds {
height: 66.6666%;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row onethird">
<div class="col-sm-8">
<div class="red">
<h1>Title:</h1>
<h1>Description of site</h1>
</div>
<div class="green">
<h2>pictures go here</h2>
</div>
</div>
<div class="col-sm-4">
<div class="blue">
<h1>Signup form</h1>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
</div>
</div>
</div>

Answer 2

You can use a different setup for your divs, stacking the lefthand elements in one div, and the blue one on the right in it's own div.
Check out this fiddle: https://jsfiddle.net/3budaekb/ (I've used different classes in lieu of bootstrap)
<div class="row">
<div class="col-sm-8>
// Lefthand side containers:
// div.red
// div.green
</div>
<div class="col-sm-4>
// right hand side element:
// div.blue
</div>
</div>