使用Bootstrap使网格元素自动填充父div

Question

我试图为网站实现动态布局选项，但我无法确定如何使其发挥作用。我试图创建的效果应如下所示：

其中：

＆＃34; 1＆＃34;将有文字，并具有动态高度;

＆＃34; 2＆＃34;将具有背景颜色并填充其下方的包含div，并使用水平和垂直居中的小矢量图像。我想在这上面使用动态高度，所以无论文本中有多少文本，它都会填充此容器底部的其余部分;

＆＃34; 3＆＃34;是一个图像（img-responsive），填充容器的右半部分。它将设置容器div的高度，可以实现不同大小的图像。

我希望这些显示在桌面浏览器和横向平板电脑上显示，但是当它以较小的屏幕格式查看时，它会落入单个列中。

我目前正在为这些中的每一个使用两个col-md-6，并且在容器上具有所需的背景颜色。我在使用引导程序时遇到的问题是当屏幕介于992px和1200px之间时，内容会折叠到较小的屏幕尺寸，但它正在使得＃2; 2＆＃34;延伸到＆＃34; 3＆＃34;的底部。

我尝试过使用flexbox，但是当我将它与col-md-6结合使用时，它不会折叠到较小屏幕尺寸的单列上。它也似乎与bootstrap 3一起工作得太好了。

除了完全取出引导程序之外，我对任何类型的解决方案持开放态度。非常感谢您的时间和帮助！

编辑1：

完全忘了添加代码。我到目前为止的内容如下：

https://jsfiddle.net/b86k1myr/

<div>

它有点不稳定因为bootstrap也没有启用。但到目前为止，这就是我所拥有的。另一个使用flexbox的尝试如下：

https://jsfiddle.net/mkg73uvk/

Answer 1

作为未来的提示，您应该始终发布您当前正在使用的标记。

试试这个：

<div class="row">
    <div class="col-md-6 col-sm-12">
        <div class="row">
            <div class="col-md-12">1</div>
        </div>
        <div class="row">
            <div class="col-md-12">2</div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">3</div>
</div>