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

Posted 2023-03-06

【中文标题】如何使用断点更改引导列网格排序？

【英文标题】：How to use Breakpoints to change bootstrap columns grid ordering?

【发布时间】：2021-07-02 23:43:20

【问题描述】：

我有这样的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>

如果屏幕小于720px，如何使用css中的断点更改引导程序中列的网格以在Column2上方显示Column1？

【参考方案1】：

您可以使用flex directions 进行调整，我将根据您的代码示例添加一个示例。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

【讨论】：

我尝试了您的解决方案，但它不起作用.. column 2 消失并且无法向下滚动

【参考方案2】：

你要修改grid tiers，例如：

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

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

因此，宽度小于 720 的视口将被视为 sm，col-12 将应用于单元格。