我怎样才能使这个弹性框列布局像这样？

Question

我是前端开发人员的新手。

超文本标记语言

<div class="row">
    <div class="col-6">
        <img src="//some image in here" alt="" class="img-fluid d-block mx-auto">
    </div>
    <div class="col-6">
        <p class="text-justify noto-sans py-5" style="letter-spacing: 0.02em; line-height: 25px; font-size: 14px;"> some text in here</p>
    </div>
</div>

布局

如何将笔记本电脑视角上的 2 列布局变成响应式移动设备中宽度为 414px 的 1 列？

这就是我想要实现的布局

感谢您阅读我的问题。

Answer 1

您可以在此处找到boostrap 网格文档。

<div class="row">
    <div class="col-12 col-sm-6">
        <img src="//some image in here" alt="" class="img-fluid d-block mx-auto">
    </div>
    <div class="col-12 col-sm-6">
        <p class="text-justify noto-sans py-5" style="letter-spacing: 0.02em; line-height: 25px; font-size: 14px;"> some text in here</p>
    </div>
</div>

您可以在这里找到演示：https://codepen.io/tuandaodev/pen/jOwzoVX