Bootstrap4下屏幕宽度小于768px时如何实现列重排？

Bootstrap 4 已全面切换为Flexbox布局，废弃了旧版的push/pull列偏移功能，你可以使用官方提供的响应式排序类order-{断点}-{序号}实现列重排需求，配合响应式宽度类即可适配不同屏幕尺寸的布局要求。

以下是适配修改后的代码示例（适配小屏<768px时2行2列排布，可根据你的实际排序需求调整参数）：

<!-- 顶部图片区域 -->
<div class="row" id="top_photos_div">                                  
    <div class="col-6 col-sm-3">
        <img src="photos/top_photos/busy_bee.JPG" class="img-full-width_height" alt="蜜蜂" />
    </div>
    <div class="col-6 col-sm-3">
        <img src="photos/top_photos/midsummer_skies.JPG" class="img-full-width_height" alt="仲夏夜日落" />
    </div> 
    <div class="col-6 col-sm-3">
        <img src="photos/top_photos/swans.jpg" class="img-full-width_height" alt="天鹅" />
    </div>
    <div class="col-6 col-sm-3">
        <img src="photos/top_photos/wood.jpg" class="img-full-width_height" alt="森林" />
    </div>
</div>

参数调整说明 #

• 列宽调整：col-6对应<768px的屏幕，每列占行宽的1/2，实现一行2列效果；如果需要小屏一行1列，把col-6替换为col-12即可，col-sm-3会保留≥768px时一行4列的原有布局。
• 顺序调整：如果需要在小屏下调整图片的排列顺序，给对应列添加order-*类即可，数值越小排列越靠前，例如你要把第三张图调到小屏的第二顺位，给第三列加order-2、第二列加order-3即可。如果需要仅在某类断点下生效，可以加断点前缀，比如order-sm-2仅对≥768px的屏幕生效。

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