如何实现大屏幕单列内两Div在小屏幕下并排显示（CSS/HTML/Bootstrap）

没问题，我帮你调整Bootstrap的栅格类就能轻松实现你要的效果！

首先得明确Bootstrap是移动优先的框架——也就是说我们要先定义小屏幕下的样式，再针对大屏幕覆盖它。你的需求刚好和默认的“大屏并排、小屏堆叠”相反，所以栅格类的顺序要调整：

• 小屏幕（比如手机、平板竖屏）：让两个div各占6列，实现并排效果
• 大屏幕（比如桌面端）：让每个div占满12列，自动上下堆叠

修改后的完整代码如下：

<div class="container-fluid">
  <div class="row">
    <!-- 第一个Div：小屏占6列，大屏占12列 -->
    <div class="col-sm-6 col-md-12">
      <canvas width="800" height="450"></canvas>
    </div>
    <!-- 第二个Div：和第一个保持一致的栅格类 -->
    <div class="col-sm-6 col-md-12">
      <!-- 这里放第二个Div的内容 -->
    </div>
  </div>
</div>

补充说明： #

• 如果你想在更大的屏幕尺寸（比如1200px以上的xl屏）才切换成堆叠效果，只需要把col-md-12换成col-xl-12就行，Bootstrap的断点可以灵活调整：
  • col-sm-*：≥576px
  • col-md-*：≥768px
  • col-lg-*：≥992px
  • col-xl-*：≥1200px
• 确保你已经正确引入了Bootstrap的CSS文件，不然栅格类不会生效哦～

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