Html 如何使用boostrap创建分割屏幕并添加响应图像

嘿，伙计们，我正试图在我的分屏布局上创造一个50:50的比例。一边是文字，另一边是图片，我能走到这一步

<div class="content-section-a">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <div class="clearfix"></div>
                <h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
                <p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img" src="assets/img/prg.jpg">
            </div>
        </div>
    </div>

---

尝试使用Bootstrap的网格系统。下面是一些可以使用的HTML示例：

<div class="row">
  <div class="col-md-6">
    <h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
    <p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
  </div>
  <div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>

正在尝试一些代码：
特别感谢
特别感谢程序员社区提供的帮助和支持
把你的图片放在这个部分

---

这将使文本部分位于页面的左侧，响应图像位于右侧。如果页面被折叠，因此无法水平放置这两个页面，它们将堆叠。如果你愿意，你可以改变这个。有关更多信息，请参阅有关网格系统的引导指南

您应该使用

col-xs-6

而不是

col-sm-6

，因为

col-sm-x

用于最小宽度为768px或更高的屏幕

---

您可能会看到它显示在底部，因为您使用的是

sm

而不是

xs

，并且屏幕分辨率低于768px。

。工作起来很有魅力。谢谢你的帮助

<div class="row">
  <div class="col-md-6">
    <h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
    <p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
  </div>
  <div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>