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

Question

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

如果屏幕小于 [=14=，我如何使用 css 中的断点更改 bootstrap 中列的网格以在 Column2 上方显示 Column1 ] ?

Answer 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>

Answer 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 将应用于单元格。

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

How to use Breakpoints to change bootstrap columns grid ordering?

html

css

media-queries

bootstrap-4