如何使用Bootstrap将标识1的图片固定到红色区域顶部且响应式无错位

使用Bootstrap原生的order-*响应式排序类即可实现需求，无需自定义定位样式，天然适配全尺寸屏幕，不会出现窗口缩放后布局错乱的问题。

核心逻辑 #

Bootstrap的order-*类支持按断点设置列的显示优先级，属性值越小排列位置越靠前，所有列默认优先级为0。你只需要给带标识1的图片所在的列，设置对应断点下最低的order值，即可让它排到指定列的顶部。

前置修正 #

你提供的现有代码最后一行存在标签缺失的语法错误，需先修正为完整结构，否则会影响基础布局：

<!-- 修正前错误代码 -->
l-6 px-0"><img class="img-thumbnail img-fluid" src="" alt=""></div>
<!-- 修正后代码 -->
<div class="col-lg-4 col-6 px-0"><img class="img-thumbnail img-fluid" src="" alt=""></div>

示例修改代码 #

假设你要调整的带标识1的图片是原本结构中的第7个元素，只需给它添加order-lg-0，其余列保持默认设置即可：

<div class="container">
    <div class="row position-relative">
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="a.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="b.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="c.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="d.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="e.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="f.jpg" alt="">
        </div>
        <!-- 带标识1的图片列，添加order-lg-0设置lg断点下最高优先级 -->
        <div class="col-lg-4 col-6 px-0 order-lg-0">
            <img class="img-thumbnail img-fluid" src="标识1的图片.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="i.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="j.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="k.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="l.jpg" alt="">
        </div>
        <div class="col-lg-4 col-6 px-0">
            <img class="img-thumbnail img-fluid" src="" alt="">
        </div>
    </div>
</div>

如果移动端也需要调整排序，同理添加对应尺寸的order-*类即可，不需要额外自定义CSS。

内容的提问来源于stack exchange，提问作者Baba Nebiyev