js判断屏幕尺寸并且对li标签调整顺序实现响应式操作

最近工作中遇到一个问题，需求是一个表单提交页面实现响应式，但是发现一个问题，本来pc端是两列布局，为了适应手机端需要做成单列的，但是实现之后发现顺序变了，当初没想太多，就直接ctrl+c ctrl+v复制了一遍ul，对两个ul分别取不同类名当作pc端和手机端的布局，效果实现了然后提交，问题出现了，测试发现点击提交按钮无法提交内容，并且很多输入框的验证逻辑也都发生了不同程度的错误，找到原因是因为有两个ul，虽然类名不一样，但是每个li名字是一样的，即使css中设置了display：none；但只是隐藏了，实际上还是存在页面中的，这样就造成了类名冲突无法进行提交。

于是，开始寻找其他方法解决最初那个响应式顺序问题，试了好几种方式，小伙伴也帮我改了好多，结果就是越改问题越多，不得已全部git reset --hard HEAD（撤销未提交的修改），最后无意间发现js可以直接对li标签进行调整顺序，这就是我最想要的结果啊，立马尝试。

上图一句代码就是将第4个li放在第2个li后面，试了一下果然很棒，完美实现顺序调整，并且简洁易懂，于是加上对屏幕尺寸的判断

将li排序代码放进屏幕尺寸判断语句里面，就可以完美实现响应式的li调整顺序了，也不会造成提交冲突了。