Bootstrap 4 图文环绕与排序问题：移动端图片需后置

嘿，我完全懂你碰到的这个麻烦——桌面端想让文字好好环绕图片，到了移动端又得把图片挪到文字后面，但一加order-last，文字环绕的效果就没了，移除它排序又不对。这事儿其实是Flexbox和float属性的“冲突”在搞鬼，咱们来搞定它！

问题根源 #

Bootstrap的order-*类是基于Flexbox实现的，而float属性在Flex容器的子元素里是不生效的——因为Flex子元素会脱离常规的文档流，float也就起不到环绕文字的作用了。当你给图片所在的列加上order-last，这个列就变成了Flex子元素，自然文字环绕就失效了。

解决方案：混合Flex排序与浮动布局 #

咱们换个结构，把图片和文字放在同一个列容器里，通过响应式的Flex排序和条件浮动来实现需求：

<div class="container">
  <div class="row">
    <div class="col-12 d-flex flex-column flex-md-row">
      <!-- 图片元素：桌面端左浮动+靠前，移动端靠后 -->
      <img 
        src="http://via.placeholder.com/350x150" 
        alt="示例图片" 
        class="float-md-start me-md-3 mb-3 mb-md-0 order-md-1 order-2"
      >
      <!-- 文字容器：桌面端靠后，移动端靠前 -->
      <div class="order-md-2 order-1">
        这里放上你的所有文字内容...比如：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

代码细节说明 #

• d-flex flex-column flex-md-row：让容器在移动端采用垂直排列（flex-column），桌面端自动切换为水平排列（flex-md-row）
• order-md-1 order-2 & order-md-2 order-1：通过响应式order类，精准控制图片和文字在不同屏幕尺寸下的排列顺序
• float-md-start me-md-3 mb-3 mb-md-0：仅在桌面端给图片添加左浮动和右侧间距，移动端自动移除浮动（垂直排列无需浮动），同时保留上下间距保证排版美观

这样调整后，桌面端文字会正常环绕图片，移动端图片会乖乖排在文字后面，完美兼顾两种布局需求！

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