如何用CSS或jQuery使divthree与divTwo同行显示并调换顺序？

没问题，我给你两种不用改动原有HTML结构的实现方法，按需选择就行：

方法一：纯CSS实现（推荐） #

利用Flex布局可以轻松搞定需求，既不用改HTML结构，还能灵活控制元素排列：

/* 给父容器设置Flex布局并允许换行 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 可选：给元素之间加间距，提升视觉效果 */
}

/* 让divOne占满整行，单独显示 */
#divOne {
  flex-basis: 100%;
}

/* 调整divthree的显示优先级，让它排在divTwo前面 */
#divthree {
  order: -1;
}

/* 可选：让两个div平分剩余宽度，避免宽度失衡 */
#divthree, #divTwo {
  flex: 1;
  min-width: 200px; /* 可选：设置最小宽度，防止小屏幕下内容挤变形 */
}

原理说明：

1. flex-wrap: wrap让容器内元素在空间不足时自动换行；
2. flex-basis: 100%强制divOne占满整行，确保它单独显示；
3. order: -1让divthree的优先级高于默认order为0的divTwo，从而排在它前面；
4. Flex布局默认会让同一行的元素在一行显示，完美满足要求。

方法二：jQuery实现 #

如果更倾向用JS来调整元素位置，也可以通过动态移动DOM节点的方式实现：

// 把divthree移动到divTwo的前面
$('#divthree').insertBefore('#divTwo');

// 让divOne占满整行
$('#divOne').css('width', '100%');

// 设置两个div为行内块元素，确保在同一行且顶部对齐
$('#divTwo, #divthree').css({
  'display': 'inline-block',
  'width': 'calc(50% - 10px)', /* 平分宽度，减去一半间距 */
  'vertical-align': 'top',
  'margin-right': '20px'
});

// 去掉第二个div的右边距，避免多余空白
$('#divTwo').css('margin-right', '0');

这个方法是通过动态调整DOM节点的位置来改变显示顺序，再通过CSS让目标元素在一行排列，原HTML文件完全不需要手动修改。

小提示 #

优先选CSS方案哦，纯样式控制不会触发DOM重排，性能更好，也更符合前端开发的最佳实践~

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