表单字段视觉顺序由HTML源码决定，Bootstrap的order-类仅在Flex容器（如.row）中生效；横向排列应选用.form-inline或栅格系统，而非依赖order-调整顺序。
表单字段顺序由 HTML 源码决定，不是靠 Bootstrap 类控制
Bootstrap 本身不提供类似 order- 这样的类来调整表单字段的视觉顺序。表单内各 <input>、<label> 的排列，完全取决于你在 HTML 中写的先后顺序，以及所用的布局方式（如 .form-inline、栅格系统或 Flex 容器）。
常见误解是想用 order- 去“重排”表单控件——但除非你把每个字段单独包进 <div class="col"> 并放在 <div class="row"> 下，否则 order- 根本不会生效。
- 纯
<form>内直接写<input>，顺序就是源码顺序，无 CSS 干预 - 用了
.form-inline，字段会按行内流式排列，仍遵循 HTML 顺序 - 若套了
.row > .col，才可对每个.col单独设order-类
想让标签和输入框并排显示，用 .form-inline 或栅格
如果你的目标是“字段横向排列”，关键不是“调顺序”，而是选对容器结构。
例如，要让「姓名」标签和输入框紧挨着，且整行左对齐：
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="姓名">
</div>
<div class="form-group">
<label class="sr-only" for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="邮箱">
</div>
</form>
-
.form-inline只在 ≥576px（sm断点）下生效；小屏自动堆叠成垂直流 -
.sr-only是为无障碍设计的隐藏标签，避免视觉重复；若需可见标签，改用class="form-label"并确保它和.form-control在同一.form-group内 - 别给
.form-control外层加.col后又漏掉.row——没有display: flex父容器，order-类完全无效
真需要视觉顺序和 DOM 顺序不一致？用栅格 + order-
比如 SEO 要求正文字段写在 HTML 前面，但视觉上希望「搜索按钮」始终在最右。这时得拆成栅格列：
<div class="row">
<div class="col-12 col-md-8 order-md-1">
<input type="text" class="form-control" placeholder="关键词">
</div>
<div class="col-12 col-md-4 order-md-2">
<button type="submit" class="btn btn-primary w-100">搜索</button>
</div>
</div>
- 小屏下两列堆叠，
order-不起作用，顺序由源码决定（即关键词在上、按钮在下） - 中屏及以上，
order-md-1和order-md-2生效，关键词在左、按钮在右 - 必须给所有同级
.col都设order-，否则未设置的列默认order: 0，可能插队到中间 -
order-first和order-last在 Bootstrap 5.3+ 才支持；老项目（如 4.x 或 bootstrap-table 1.9.1）只能用数字类
容易被忽略的关键点
调试时最常卡住的地方不是语法写错，而是：父容器缺失、断点没匹配、或被其他样式覆盖。
- 浏览器 devtools 里检查元素的
computed order值，比看类名更可靠 - 如果用了
bootstrap-table，它的表单字段（如搜索栏）通常由插件动态生成，此时修改 HTML 源码顺序无效，得通过searchInput或customSearch钩子干预 -
order-只影响视觉顺序，不影响语义结构和键盘 tab 流——可访问性需额外处理tabindex或 ARIA 属性
