Bootstrap 4响应式布局（Push & Pull）：移动端三列转两行布局调整需求

很简单，咱们利用Bootstrap的响应式栅格系统和flex布局特性，就能轻松实现你要的移动端适配效果。直接看修改后的代码：

<div class="row my-auto flex-wrap">
  <!-- Logo 区域：移动端占满整行，桌面端保持自动宽度 -->
  <div id="logo" class="col-12 col-md-auto mb-2 mb-md-0">
    <a href="./index.html">
      <img src="images/logo.png" alt="ppissis logo"/>
    </a>
  </div>
  
  <!-- 搜索 + FB登录容器：桌面端占剩余宽度，移动端占满整行 -->
  <div class="col-md d-flex align-items-center">
    <div id="search" class="flex-grow-1">
      <!-- 这里放入你的搜索input代码 -->
    </div>
    <div id="fb" class="ml-md-3">
      <img src="images/fb_login.png" alt="FB login" height="40"/>
    </div>
  </div>
</div>

关键改动点说明： #

• 给外层row添加flex-wrap：让列在空间不足时自动换行（Bootstrap的row默认是flex布局，这个类能触发换行逻辑）
• Logo列的响应式类：col-12 col-md-auto
  • col-12：在小屏幕（屏幕宽度<768px）时占满整行，实现首行仅显示Logo的效果
  • col-md-auto：在中等屏幕及以上（≥768px）时恢复原来的自动宽度，保持一行布局
• 间距优化：mb-2 mb-md-0给移动端Logo添加底部边距，桌面端自动移除，让布局更紧凑美观
• 搜索和FB登录的容器：用col-md让它在桌面端占剩余宽度，内部加d-flex align-items-center保证两个元素垂直居中；搜索区域加flex-grow-1让它占满容器剩余空间，FB登录用ml-md-3仅在桌面端添加左边距，避免移动端换行后多余间距

如果你的项目没有使用Bootstrap，也可以用CSS媒体查询实现类似效果，核心逻辑是：

• 在屏幕宽度小于设定值（比如768px）时，给Logo设置width: 100%，让它独占一行
• 搜索和FB登录容器同样设置width: 100%，并让内部元素水平排列

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