Html 网站响应性设计问题

我正在尝试使用引导创建一个响应性强的网站，但我很难让我的“关于”部分不超过给定的区域（深灰色），下面是一个例子，当缩小尺寸或在手机上查看时，英雄的字体会与图片的正面重叠，但我不确定该怎么做

body，
html{
身高：100%；
字体大小：100%；
}
.cd固定背景{
字体系列：“开放式Sans”，无衬线；
最小高度：100%；
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
背景位置：中心；
}
.cd滚动背景{
最小高度：60%；
}
.cd-fixed-bg.cd-bg-1{
背景图像：url（“http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
}
.cd-scrolling-bg.cd-color-1{
身高：60%；
背景色：#212121；
颜色：#fff；
}
.cd简介{
颜色：#212121；
位置：绝对位置；
最高：40%；
底部：自动；
右：自动；
左：15%；
文本对齐：左对齐；
最大高度：70%；
}
.cd-intro-dec-1{
字体大小：300；
字体大小：48px；
}
.cd-intro-dec-2{
字体大小：400；
字体大小：72px；
}
.cd内容格式{
字体系列：“开放式Sans”，无衬线；
}
.标题关于{
字体大小：300；
字体大小：60px；
}
.关于潜艇{
字号：700；
字号：18px；
}
.关于内容{
字体大小：400；
}
.关于img调整{
填充顶部：20px；
垫底：10px；
}
.关于报价{
字体大小：300；
字体：斜体；
}

致敬页
致敬
史蒂夫 乔布斯
“成为公墓里最富有的人对我来说并不重要。晚上睡觉时说我们做了一些很棒的事情，这对我来说才是重要的。”
关于
Lorem ipsum door sit amet，concetetur adipising elit。德莱克特斯，请坐下。准快速眼动最小真甲壳虫、驱虫剂、液体的智慧罪魁祸首、死亡
共和国的建筑学是一门真正意义上的学问，是一门既能解决现状又能满足消费者需求的学问。自由的自由意志是什么
我的意思是，我的软膏是一种软性软膏，是一种软性软膏，是一种软性软膏，是一种软性软膏！我的脸很好，我的脸很好
Eum a rerum hic，sekui assumenda nostrum facere sit atque，delecutus porro quibusdam doloribus dolore？除别名CONSEQUATURE减去ipsam外，自然状态必须是暂时的。莫莉塔·马格尼，前任
Reisindis，incident executionem，voluptatum quasi atque，aspernatur beatae，sed a voluptatem praesenium amet quisquam itaque nemo incident accusamus减去ducimus laboriosam omnis saepe？自由人在赛佩击退了所有人
减去“真实的选择”是指暂时性的流动性还是暂时性的流动性？别名尊严之神，特尼图尔，圣约翰智慧之神，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰，圣约翰！等等，鼹鼠

您这里有错误

<div class="col-xs-12 col-md-8">

改成

<div class="col-xs-6 col-md-8">