Bootstrap 站点在浏览器中看起来不错，但 div 无法在移动设备中正确呈现

Question

我使用 Bootstrap 创建了一个多行、多列的站点。该网站在常规浏览器中看起来很棒，但是当我为移动设备调整它的大小时，div 不对齐，相互堆叠，里面的内容消失了，或者 div 扁平到你看不到图像的地方。如何防止在大/中尺寸屏幕中奇怪地调整 div 的大小，但在小屏幕上按比例堆叠？

这是我的行之一：

<div class="row row1">
            <div class="col-xs-12 col-sm-6 col-lg-5 row1-topleft">
                <div class="inside-index">
                    <h2>one header</h2>
                    <p>content</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-7 row1-topright">
                <div class="inside-index-img">
                    <img src="http://placehold.it/900x1200">
                </div>
            </div>
        </div><!-- end  row1 -->

和 CSS：

html, body {
    height: 100%;
}
div {
    height: 100%;
}
.row1 {
    height: 120%;
}

这是一个Fiddle，其中重新创建了整个站点和问题。

Answer 1

如果我理解正确的话，你会得到： 这就是你想要的：

您正在寻找的解决方案是将图像作为背景并使用 css 属性 background-size:cover 来适应列的大小。

代码：https://jsfiddle.net/jkLjnt0d/7/