Javascript 使用match媒体时，手机优先？

我有一个使用多个表单元素的页面。对于没有滚动的智能手机来说太多了，这是我不想要的。为了解决这个问题，我将表单元素放在旋转木马中

当我不需要旋转木马（更大的显示器）时，我需要消除它。我知道的唯一方法是重新指定旋转木马项目的父属性，然后删除旋转木马

使用java脚本，这种方法可以很好地工作。然而，要实现这一点，我需要使用match media调用java脚本函数。由于大多数传统浏览器（不支持match media）都是由台式机使用的，这不符合mobile first开发吗

为传统浏览器设计，然后升级页面，使其能够理解更多更新的语言，是更明智的做法，还是我处理这个问题完全错了？如果不需要的话，我宁愿不添加polyfill来解决这个问题。如果我没有看到简单的解决方案，请原谅我的无知

下面是一个在codepen上更改大型显示的父div的代码片段

// Transfer elements from carousel to a larger div display
function SetParentDiv() {
  var newParent = document.getElementById('LargeDisplayPage');
  var oldParent = document.getElementById('1');

// Carousel items are 3 divs with numbered id's
  for (var x=1; x < 4; x++) {
    oldParent = document.getElementById(x);
    while (oldParent.childNodes.length > 0) {
      newParent.appendChild(oldParent.childNodes[0]);
    }; ///endwhile
  }; // endfor

document.getElementById('SmallDevicePage').style.display = 'none';

...

//将元素从转盘传输到更大的div显示器
函数SetParentDiv（）{
var newParent=document.getElementById（'LargeDisplayPage'）；
var oldParent=document.getElementById（'1'）；
//旋转木马项目为3个分区，带有编号id
对于（变量x=1；x<4；x++）{
oldParent=document.getElementById（x）；
而（oldParent.childNodes.length>0）{
newParent.appendChild（oldParent.childNodes[0]）；
}；///endwhile
}；//结束
document.getElementById（'SmallDevicePage'）。style.display='none'；
...

---

是的，我想说的是，你非常严重地过度复杂化了。你完全可以在没有任何JavaScript的情况下破解你想要的东西，只需在519px媒体查询中添加类似的东西：`.carousel指示符{display:none；}.carousel-inner>.item{display:block；}“我从来没有想过。我是一个老派的Windows开发人员。通常，当你隐藏一个“面板”时。”所有的孩子都被隐藏了。我不知道这是一个选项。太好了！谢谢你，先生！@thewatcheruatu，如果你将你的评论作为一个答案发布，我将标记为已接受。我是新来的，因为这是一个评论，我看不到任何方法来关闭它。再次感谢。