移动端调整容器位置：实现图片与文本并排显示

安全阿岳

2026-7-6

移动端实现图片与文本并排的解决方案

核心前提

先移除图片容器上的hide-0-800类——这个类是专门在0-800px宽度下隐藏图片的，留着肯定没法实现并排。

方案一：用Bootstrap原生栅格快速实现

直接修改文本和图片容器的栅格类，把col-md-6改成col-md-6 col-6：

col-md-6保证桌面端（≥768px）各占一半宽度，正常显示
col-6强制移动端（<768px）每个容器占50%宽度，自动并排

同时给图片加上img-fluid类，防止图片溢出容器：

<div class="row">
  <div class="col-md-6 col-6">
    <!-- 你的文本内容 -->
    <p>这里是需要展示的文本</p>
  </div>
  <div class="col-md-6 col-6">
    <!-- 图片容器 -->
    <img src="your-image-url.jpg" class="img-fluid" alt="图片描述">
  </div>
</div>

方案二：自定义Flex布局（适配特殊场景）

如果原生栅格被其他样式干扰，用自定义Flex布局兜底：

给父容器加个自定义类mobile-side-by-side
写媒体查询控制移动端的布局：

/* 父容器基础样式，继承Bootstrap row的话可以省略部分属性 */
.mobile-side-by-side {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px; /* 和Bootstrap row的边距保持一致 */
}

/* 移动端（小于768px）强制子元素平分宽度 */
@media (max-width: 767px) {
  .mobile-side-by-side > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px; /* 和Bootstrap col的内边距保持一致 */
  }
}

对应的HTML结构：

<div class="row mobile-side-by-side">
  <div class="col-md-6">
    <!-- 文本内容 -->
  </div>
  <div class="col-md-6">
    <img src="your-image-url.jpg" class="img-fluid" alt="图片描述">
  </div>
</div>