我是否可以使用javascript将一个元素放在不同的位置，一个用于移动设备，另一个用于桌面？

/* 移动设备样式 */
@media (max-width: 768px) {
  .element {
    /* 设置移动设备上的位置 */
    top: 10px;
    left: 10px;
  }
}

/* 桌面样式 */
@media (min-width: 769px) {
  .element {
    /* 设置桌面上的位置 */
    top: 50px;
    left: 50px;
  }
}

// 获取元素
const element = document.querySelector('.element');

// 检测设备类型和屏幕宽度
const isMobile = window.matchMedia("(max-width: 768px)").matches;

// 根据设备类型添加或删除CSS类
if (isMobile) {
  element.classList.add('mobile-position');
} else {
  element.classList.remove('mobile-position');
}