显示隐藏/显示特定问题

Question

我有这段代码：

'click #StartersButton' : function() {
var secondColumn = document.getElementById("secondColumn");
var thirdColumn = document.getElementById("thirdColumn");

  if($(window).width() < 800 ) {
    secondColumn.style.display = "inline";
    thirdColumn.style.display = "none";
  }
},
'click #ProButton' : function() {
  var secondColumn = document.getElementById("secondColumn");
  var thirdColumn = document.getElementById("thirdColumn");

  if($(window).width() < 800 ) {
    secondColumn.style.display = "none";
    thirdColumn.style.display = "inline";
  }
},

这是html

<div id="mobileVersion">
<ul class="plan_tabs">
  <li><button name="button"  id="StartersButton" type="button">STARTERS</button></li>
  <li><button name="button"  id="ProButton" type="button">PRO</button></li>
</ul>

我在移动版本上使用此触发器事件，它只能解决我遇到的一个问题。在事件触发后，元素具有相同的显示属性，即使我像＆gt;一样调整屏幕大小。 800.在我的CSS中，我有2个媒体：

@media screen and ( max-width: 800px) {
#thirdColumn {
 display: none;
}

#mobileVersion {
 display: flex;
}
}
@media screen and ( min-width: 801px) {
  #mobileVersion{
  display: none;
  }

  #secondColumn{
   display: inline;
  }
  #thirdColumn{
   display: inline;
  }
}

事情就是当我触发事件时，来自css的显示被覆盖（内联css覆盖我的普通css），即使我改变显示的大小也无法改变它。