如何在Bootstrap 5嵌套布局中切换列顺序（无重复隐藏元素）

问题场景 #

现有基于Bootstrap的代码，要实现移动端和桌面端不同的区块展示效果：

现有代码 #

<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考虑）

解决方案 #

核心思路是把TITLE和DESCRIPTION放进同一个父容器，让这个父容器占据桌面端右半部分，IMAGE占据左半部分，这样既不产生重复区块，又能实现目标布局。

修改后的代码（推荐版） #

<!-- 移动端顺序：IMAGE → TITLE → DESCRIPTION -->
<div class="col-12 col-sm-6 order-sm-0">IMAGE</div>
<div class="col-12 col-sm-6 order-sm-1">
  <div class="col-12">TITLE</div>
  <div class="col-12">DESCRIPTION</div>
</div>

布局说明 #

• 移动端（屏幕宽度<576px）：三个区块垂直排列，顺序为IMAGE → TITLE → DESCRIPTION，适配移动端阅读逻辑。
• 桌面端（屏幕宽度≥576px）：IMAGE占据左半屏，右侧父容器里的TITLE和DESCRIPTION垂直排布，完全符合期望的布局。

如果要保留原HTML结构顺序（TITLE相关代码在前），可以通过调整order类控制显示顺序：

保留原HTML结构的版本 #

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

这个版本的HTML里TITLE容器排在前面，但桌面端会优先显示IMAGE区块，移动端则先显示TITLE+DESCRIPTION，再显示IMAGE，同样满足需求。

内容的提问来源于stack exchange，提问作者Kamil Davudov