Html 如何使用断点更改引导列网格顺序？

我有如下html代码：

<div class="container-fluid h-100">
  <div class="row no-gutters h-100">
    <div class="col-12 col-md-6  left">
      Column 1
    <div>
    <div class="col-12 col-md-6  left">
      Column 2
    <div>
  <div>
<div>

第1栏
第2栏

---

如果屏幕小于

720px

，如何使用css中的断点更改引导程序中列的网格以显示

Column1

上方

Column2

？

您可以使用

flex directions

调整，我将根据您的代码示例添加一个示例

第1栏
第2栏

您必须修改，例如：

$grid-breakpoints: (
  xs: 0,
  sm: 720px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 660px,
  md: 720px,
  lg: 960px
);

---

因此，宽度小于720的视口将被视为

sm

，而

col-12

将应用于单元格。

我尝试了您的解决方案，但无效。。

列2

消失，无法向下滚动