Javascript和媒体查询显示隐藏的div

有人知道如何在媒体查询中使用javascript吗

我想要一个左列菜单，它使用bootstap3hiddenxs隐藏在mobileview中，但我希望能够单击一个菜单按钮，该按钮覆盖在主内容区域的左列上，并用x关闭菜单。使用

function showFunction()
    {
    document.getElementById("left-col").style.visibility="visible";
    }
    function hideFunction()
    {
    document.getElementById("left-col").style.visibility="hidden";
    }

在broswer中测试此功能时，此功能正常，但一旦我单击十字以关闭菜单，如果我将屏幕调整到桌面或媒体查询的断点以上，左栏将保持隐藏状态

这有什么关系吗？或者，这是浪费时间的尝试，而这样做的好处将适用于移动设备，而不是台式机上的用户调整浏览器的大小

更新--

在桌面视图中，我有3列，左主右，带有页眉和页脚

在Mobile中，我将右柱堆叠在主柱下，默认情况下隐藏左柱

通过单击菜单图标，我将在主要内容上显示左侧导航，并单击左侧栏上的十字将其隐藏

但一旦我关闭左栏，当我调整到桌面-左栏保持可见，我希望它被强制回来

谢谢

任何帮助都会很好

---

谢谢

不要添加样式使用类并为不同的@media查询定义样式，或者在使用

document.getElementById（“左列”）后删除所有样式。removeAttribute（“样式”）

将它们重置为CSS默认值（在

隐藏函数中执行此操作，而不是在那里的行中）。但老实说，普通用户不会像你我一样调整他们的窗口大小：）如前所述，使用类。在单击时删除“隐藏的x”，并在单击时添加它。我不确定你所说的使用类是什么意思？我有767以下的媒体查询课和767以上的媒体查询课？你能再解释一下吗？谢天谢地，这个想法不是直接在CSS中设置
visible
属性，而是添加/删除一个类，也许
lg menu hidden
，然后在CSS媒体查询“大”视图时，您可以将
lg menu hidden
设置为
可见性：hidden
，但其他大小，
可见性：可见
，这样即使根据“X”关闭按钮“隐藏”，菜单仍可见。