Bootstrap4移动及平板设备下列排序功能失效问题咨询

• Bootstrap 4 的order-*类断点规则为：不带断点前缀的order-*全局生效，order-sm-*仅在屏幕宽度≥576px的设备生效，<576px的移动端小屏不会应用该类样式，完全按DOM原生顺序渲染。
• 你第二个区块的DOM结构为图片列在前、文本列在后，小屏下无order规则覆盖，就会出现「第一区块文本→第一区块图片→第二区块图片→第二区块文本」的顺序，导致两张图片连续堆叠。
• 额外问题：你代码中用的img-responsive是Bootstrap 3的响应式图片类，Bootstrap 4对应类为img-fluid，不改会导致图片无法自适应列宽。

按移动端优先原则调整order类的作用断点：

1. 全局设置所有文本列的默认order为1、图片列默认order为2，保证所有小屏设备都是文本在前、图片在后
2. 仅在md及以上断点（≥768px）覆盖order值，实现桌面端第一区块文本左图右、第二区块图左文本右的布局
3. 替换响应式图片类为Bootstrap 4适配的img-fluid

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-6 offset-lg-2 order-1 order-md-1">
                <h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Beton tetőcserép</a></h2>
            </div>
            <div class="col-12 col-md-4 order-2 order-md-2">
                <a href="#" title="Tovább a termékekre">
                    <img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-fluid lazyload">
                </a>
            </div>
        </div>
    </div>
</section>

<section class="mt-5 mb-5">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-4 order-2 order-md-1">
                <a href="#" title="Tovább a termékekre">
                    <img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-fluid lazyload">
                </a>
            </div>
            <div class="col-12 col-md-6 order-1 order-md-2">
                <h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Kerámia tetőcserép</a></h2>
            </div>
        </div>
    </div>
</section>

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