调整浏览器大小时切换位置的HTML表格单元格

我有一个特殊的表，在调整浏览器大小时，其中两列切换位置

这是它的正常外观（注意字段“ID Vendedor”和“Nombre”）：

这就是调整大小时的外观：

然而，这只发生在这个特定的表中，其他表按它们应该的方式工作

这是表格的HTML和CSS：

@介质（最大宽度：768px）{
表1.resp-table{
边界：0；
}
表1.resp-table thead{
显示：无；
}
表2.resp-tr表{
边框顶部：2个实心#222；
边缘底部：10px；
显示：块；
}
表1.resp-table td{
显示：块；
文本对齐：右对齐；
字体大小：13px；
位置：静态；
}
table.resp-table td：最后一个孩子{
边界底部：0；
}
表2.resp-表td：之前{
内容：attr（数据标签）；
浮动：左；
文本转换：大写；
字体大小：粗体；
}
}

基本数据中没有干草vendedores
身份证卖方
名义
分发器
货物
Có；迪戈
费查登记处
编辑/博拉
{{vendedor.id_vendedor}}
{{vendedor.nombre}
{{vendedor.distribidor.nombre}}（{{vendedor.distribidor.id\u distribidor}}）
{{卖方货物}
{{vendedor.codigo | |“N/A”}
{{vendedor.createdAt}日期：'dd/MM/yy hh:MM:ss a'}

切换到移动视图时，标题是使用伪元素生成的，伪元素查找元素上的

数据标签

属性的内容；特别是这一块CSS：

table.resp-table td:before {
  content: attr(data-label);
  float: left;
  text-transform: uppercase;
  font-weight: bold;
}

问题在于

数据标签

属性在HTML中的循环方式错误，交换它们，标题将正确：

<td data-label="Nombre">{{vendedor.id_vendedor}}</td>
<td data-label="ID Vendedor">{{vendedor.nombre}}</td>

基本数据中没有干草vendedores
身份证卖方
名义
分发器
货物
Có；迪戈
费查登记处
编辑/博拉
{{vendedor.id_vendedor}}
{{vendedor.nombre}
{{vendedor.distribidor.nombre}}（{{vendedor.distribidor.id\u distribidor}}）
{{卖方货物}
{{vendedor.codigo | |“N/A”}
{{vendedor.createdAt}日期：'dd/MM/yy hh:MM:ss a'}

你的

缺少一个孩子

。你的

缺少一个孩子

。非常感谢！错过了这些细节，我觉得自己很傻，我仍然是个书呆子，我正在努力学习网络开发。没问题，我明白为什么你可以忽略它。很高兴我能帮忙。

<td data-label="ID Vendedor">{{vendedor.id_vendedor}}</td>
<td data-label="Nombre">{{vendedor.nombre}}</td>