如何通过Bootstrap Flex类实现两Div在屏幕缩小时自动上下排列

问题原因 #

你当前的代码里，两个子div没有设置响应式宽度规则，虽然Bootstrap的row默认开启了flex-wrap: wrap，但只有当容器宽度小于两个子元素的总宽度时才会触发换行，这就是为什么只有在屏幕极小的时候才会上下排列。

解决方案：用Bootstrap响应式列类控制换行时机 #

不需要自定义媒体查询，直接给两个子div添加Bootstrap的响应式列类，就能指定在某个屏幕断点下自动占满整行，触发上下排列。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<section class="header_full_width py-2 px-4">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center justify-content-lg-between">
      <!-- 第一个div：md及以下占满整行，lg及以上自动宽度，文字对齐适配 -->
      <div class="col-md-12 col-lg-auto text-center text-lg-left mb-2 mb-lg-0">
        <a href="tel:+3630" class="text-white_disabled header_full_width_link text-white_redundant" title="Hívás"><i class="fa fa-phone mr-1 mr-md-2"></i>Kérdésed van? +36 30 123 4567</a>
      </div>
      
      <!-- 第二个div：md及以下占满整行，lg及以上自动宽度，文字对齐适配 -->
      <div class="col-md-12 col-lg-auto text-center text-lg-right">
        <span class="text-white_disabled header_full_width_link text-white_redundant"><i class="fa fa-envelope mr-1 mr-md-2"></i>info@emailcimem.hu</span>
        <span class="nav_separator_2 text-white mx-1">|</span>
        
        <a href="kapcsolat" class="text-white_disabled header_full_width_link text-white_redundant" title="Elérhetőségeink"><i class="fa fa-phone-square mr-1 mr-md-2"></i>Kapcsolat</a>
      </div>
    </div>
  </div>
</section>

关键修改说明 #

• col-md-12：在屏幕宽度≥768px（md断点）以下时，该div占满整行（12列），自动触发换行。
• col-lg-auto：在屏幕宽度≥992px（lg断点）及以上时，div宽度自适应内容，保持横向排列。
• text-center text-lg-left/right：适配不同屏幕下的文字对齐，提升视觉效果。
• mb-2 mb-lg-0：在小屏幕下给第一个div添加底部间距，避免两个内容挤在一起，大屏下移除间距。

调整换行时机 #

如果想要更早触发换行（比如在屏幕宽度≥576px的sm断点以下），只需要把col-md-12改成col-sm-12，col-lg-auto改成col-md-auto即可，对应断点可参考Bootstrap 4的断点规则。

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