求助：如何使用Bootstrap Grid垂直创建列？

嘿，我明白你的困惑！Bootstrap网格默认是水平排列的，但要实现垂直列其实很简单，有两种常用的方式，根据你的需求选就行：

方式一：让列全屏垂直堆叠（所有屏幕尺寸） #

如果希望不管屏幕大小，列都从上到下依次排列，直接给每个列添加col-12类即可。这个类会让列占满整行的宽度，所以每个列都会自动换行到下一行，形成垂直布局：

<div class="container">
  <div class="row">
    <div class="col-12 bg-primary p-3 mb-2">第一列</div>
    <div class="col-12 bg-secondary p-3 mb-2">第二列</div>
    <div class="col-12 bg-success p-3">第三列</div>
  </div>
</div>

方式二：在行容器内垂直排列列 #

如果想让列保持在同一个row容器里，但改变排列方向为垂直，可以给row添加Bootstrap的flex布局类flex-column，这样行内的列就会从上到下排列，而不是默认的从左到右：

<div class="container">
  <div class="row flex-column">
    <div class="col bg-primary p-3 mb-2">第一列</div>
    <div class="col bg-secondary p-3 mb-2">第二列</div>
    <div class="col bg-success p-3">第三列</div>
  </div>
</div>

额外技巧：响应式垂直排列 #

如果需要在特定屏幕尺寸下才切换为垂直排列（比如移动端垂直，桌面端水平），可以结合响应式的flex类。比如flex-md-row flex-column，表示在中等屏幕（md及以上）用水平排列，小屏幕用垂直排列：

<div class="container">
  <div class="row flex-md-row flex-column">
    <div class="col-md-4 bg-primary p-3 mb-2 mb-md-0">第一列</div>
    <div class="col-md-4 bg-secondary p-3 mb-2 mb-md-0">第二列</div>
    <div class="col-md-4 bg-success p-3">第三列</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Adrián Jaramillo