Html 在同一行中布局具有不同高度的不同列

我想使用bootstrap3进行如下布局：

但是网格系统似乎同一行中的不同列不能有不同的高度，或者它可能会出现白色块

下面是我的代码，但如果我更改右侧列的高度值，整行将崩溃

<div class="container">
<div class="row clearfix">
    <div class="col-md-6 column" style="background:red; height:40%;">test
    </div>
    <div class="col-md-6 column" style="background:blue;">test
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-6 column" style="background:yellow; height:50%;">test
    </div>
    <div class="col-md-6 column" style="background:green;">tset
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column" style="background:gray; height:10%;">test
    </div>
</div>

测验
测验
测验
采集器
测验

---

谁能帮帮我，谢谢

不确定这是否是你的想法，但也许这是一个很好的起点：

<div class="container">
    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 column">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:red; height:40px;">

        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:green; height:20px;">

        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 column" >
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:blue; height:20px;">

        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:yellow; height:30px;">

        </div>
    </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:grey; height:30px;">

        </div>
    </div>    
</div>

---

jsfdle:

引导列模块的可能重复可能不是问题的答案。你应该看看手术室。奇怪。当我在浏览器中打开它时，它会工作。但如果我使用隐姓埋名模式，它就不起作用了。@Paulie_D it works:）只需调整预览窗口的大小即可。这是因为bootstrap中的“col md-”类和媒体查询。我已经更新了代码以涵盖所有情况。嗨@Zentoaku，我认为你的代码对我真的很有帮助！！因为我在本地使用这个解决方案，看起来很好！但我不知道为什么在JSFIDLE中将“px”更改为“%”时布局会被破坏@陳柏伸 很高兴听到：）如果对你有好处，请在答案上做标记：）