（CSS/HTML）如何在引导中进行这种对齐？（左文本右图像网格）

我在寻求帮助。。如何使用Gridsystem在引导中制作此框？ 像这样的左中文本和右图像？ 第二个问题是。。当浏览器的大小变小时，如何使图像变为背景。。像照片上那样

示例：gumpyframework 尝试：

团队

测试文本

尝试将整个区域的图像设置为

背景图像

，以正确显示图像。您可以使用

背景位置

属性移动图像。有关更多信息，请参阅

部分{
背景色：红色；
背景图像：url（'http://i.imgur.com/gowMz8A.jpg');
背景位置：右中；
背景大小：30%；
背景重复：无重复；
最小高度：300px；
}
.包装纸{
最大宽度：70%；
保证金：0自动；
填充：30px0；
}
.文本{
宽度：50%；
}

Lorem ipsum dolor sit amet，奉献精英。你在埃文尼特干什么？但是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是，我们的共同点是！多洛雷姆·多洛雷纳·德莱克图斯。

您几乎可以查看任何引导程序网站并找到html布局。您还应该阅读it说明网格系统如何工作以及如何正确使用它

<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
  <div class="banner-text">
    <h1 class="text-info">
    Become a Surgeon!
    </h1>
    <p>Digital Surgeons is looking for an experienced web developer ....</p>
    <button class="btn btn-info">
    Apply Now
    </button>
  </div>
</div>
<div class="col-sm-4"><img class="hidden-xs" src="http://placehold.it/500x500" id="africaPhoto" alt="Smiley face" >                    </div>
</div>
</div>

---

到目前为止，您是否有一些代码可以显示您的工作情况？添加了截取的代码。。到目前为止我都试过了

@media (max-width: 768px) {
  body {
    background-image:url('http://placehold.it/500x500');
  }
}