Html 引导浮动列向上以消除空白

我正在尝试创建类似以下内容的布局：

“1/3”和“2/3”标签指的是我希望这些部分（在网络上）占据多少屏幕

我已经创建了两行（分别有一列和两列）来尝试生成这个布局。但是，由于行是堆叠的，因此我的布局是这样的：

如何向上移动蓝色区域，使其不存在空白，但它仍能响应，并在较小屏幕上移动到其他区域的下方

这是我的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>

我尝试使用CSS和高度百分比以响应的方式设置不同部分的高度。我的主要问题是把蓝色的柱子浮起来

我曾考虑过将蓝色部分划分为两行，但最终会在较小的屏幕上划分注册表单的部分，这是我希望避免的

---

任何帮助都将不胜感激！提前谢谢

我认为正确的做法是将左侧的所有内容放入.col-sm-8，右侧的所有内容放入.col-sm-4

查看下面的示例

.red{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
格林先生{
背景颜色：绿色；
}
html，正文{
身高：100%；
宽度：100%；
}
.容器液体{
身高：100%；
}
.行{
身高：100%；
}
.满{
身高：100%；
}
三分之一{
身高：33.333%；
}
.三分之二{
身高：66.6666%；
}

标题：
场地描述
这里有照片
报名表
注册字段
注册字段
注册字段
注册字段

您可以为您的div使用不同的设置，将左侧元素堆叠在一个div中，将右侧的蓝色元素堆叠在自己的div中。 看看这个提琴：（我用了不同的类来代替引导）

//右侧元件：
//蓝色分区

.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%;
}

<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>