如何在嵌套时切换 Bootstrap 5 列顺序（没有隐藏的重复项）？

Question

以下代码应该以不同方式显示移动和桌面视图的块。

<div class="col-12 col-sm-6 order-sm-1">TITLE</div>
<div class="col-12 col-sm-6 order-sm-0">IMAGE</div>
<div class="col-12 col-sm-6 order-sm-2 offset-sm-6">DESCRIPTION</div>

此代码以这种方式表示桌面上的块。 在桌面视图块上，图像和标题将具有相同的高度。

--------------- ---------------
-----IMAGE----- -----TITLE-----
--------------- ---------------
--------------- ---------------
--------------- --DESCRIPTION--
--------------- ---------------

但我想以这种方式显示这些块（在桌面上）。 描述块应在标题块下。 它们都应该代表屏幕的右半部分。

--------------- ---------------
--------------- -----TITLE-----
-----IMAGE----- ---------------
--------------- --DESCRIPTION--
--------------- ---------------

我该怎么做？ 重要的是要补充一点，我们不能使用使用隐藏类的双块来切换其在不同视图中的可见性（因为 SEO）。

Answer 1

您只能对同级元素使用order 。

order属性指定弹性项目相对于同一容器内弹性项目的 rest 的顺序。

使用 Flex 的同一容器中所有列的无 JS解决方案绝对可以使用flex-basis ，但有一个缺点......

...你需要一个高度：

使用 Dev Tools 观察它们在小断点以下崩溃。

 .row { height: 150px; } @media (min-width: 576px) {.col:nth-child(2) { flex: 0 100%;important: background; lightblue; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <div class="container"> <div class="row row-cols-1 row-cols-sm-2 flex-column justify-content-sm-center"> <div class="col order-sm-2">TITLE</div> <div class="col order-sm-1 d-flex justify-content-sm-center align-items-sm-center">IMAGE</div> <div class="col order-sm-3">DESCRIPTION</div> </div> </div>

但是谁愿意在2023年高处工作呢？ 不要忘记：

作者不得使用order或flex-flow/flex-direction的*-reverse值来代替正确的源顺序，因为这会破坏文档的可访问性。

也许尝试使用grid来创建布局。 那么不需要任何订购：

 /* Create two columns of equal size. */.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } /* Let each grid-item by default span 2 columns... */.grid-item { grid-column: span 2; } @media (min-width: 576px) { /*...but only span 1 column above Bootstrap's SM breakpoint. */.grid-item { grid-column: span 1; } /* Let IMAGE start on row 1 and span 2 rows. */.grid-item:nth-child(2) { grid-row: 1 / span 2; } } /* COLORS */.grid-item:nth-child(1) { background: lightgreen; }.grid-item:nth-child(2) { background: lightyellow; }.grid-item:nth-child(3) { background: lightblue; }

 <div class="grid"> <div class="grid-item">TITLE</div> <div class="grid-item">IMAGE</div> <div class="grid-item">DESCRIPTION</div> </div>

也可以在 Bootstrap 中使用 Grid。