Bootstrap3实现桌面端图右文左、移动端图上文下布局求助

核心思路：保持HTML结构中图片列写在文字列前方，满足移动端默认排序为图片在上、文字在下，再通过栅格排序或flex属性反转实现桌面端文字居左、图片居右的效果，两种方案都仅需调整前端代码，和你当前使用的Bootstrap 3.4.1 + Laravel 6.0技术栈完全兼容。

方案1：使用Bootstrap 3原生栅格排序类 #

Bootstrap 3自带的col-sm-push-*和col-sm-pull-*类仅在≥768px的桌面端生效，移动端不会改变元素原有顺序，不需要额外写自定义CSS，是成本最低的实现方式。
修改你的HTML栅格类即可：

<div class="box-mission">
    <div class="row middle-sm">
        <!-- 图片列：桌面端右推7个栅格单位，占5格宽度 -->
        <div class="col-sm-5 col-sm-push-7 col-xs-12">
            <img src="图片地址">
        </div>
        <!-- 文字列：桌面端左拉5个栅格单位，占7格宽度 -->
        <div class="col-sm-7 col-sm-pull-5 col-xs-12">
            <h3>Lorem ipsum dolor</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

<!-- 第二个box-mission按相同规则修改栅格类即可 -->

方案2：使用flex布局媒体查询适配 #

如果你的项目用了自定义flex栅格类，不兼容Bootstrap原生push/pull属性，可以用少量自定义CSS实现：
首先新增CSS规则：

/* 适配Bootstrap3 sm断点：≥768px的桌面端 */
@media (min-width: 768px) {
    .flex-row.reverse-sm {
        flex-direction: row-reverse;
    }
}

之后给每个需要图片居右的flex-row新增reverse-sm类即可：

<div class="box-mission">
    <!-- 新增reverse-sm类 -->
    <div class="flex-row middle-sm reverse-sm">
        <div class="flex-col-sm-5 flex-col-xs-12">
            <img src="图片地址">
        </div>
        <div class="flex-col-sm-7 flex-col-xs-12">
            <h3>consetetur sadipscing elitr,</h3>
            <p>aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
</div>

这种方式不需要修改原有栅格类的属性，适配性更强。

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