Css 使用媒体查询使div从内联移动到堆叠

我有3个div，我想让它响应。对于最大宽度990px，我希望它们是3列布局。对于超过650px的最大宽度，我希望前两个div的跨度为30%-70%，以填充整个长度，第三列位于下方并跨越整个长度

到目前为止，我所做的在Chrome中有效，但在Firefox中却有缺陷

关键是两个div之间不能有任何空格

    <div class="columns">
    <div class="left-nav-menu">Left Column</div>
    <div class="center-content-area">Center Column</div>
    <div class="right-column">Right Column</div>
    </div>

    @media screen and (max-width: 990px) {
    div.columns {background-color:#360; display:table; width: 100%; padding: 0em;}

    div.left-nav-menu {width: 30%; margin: 0; padding: 2em; background-color: #CCC; 
    display:table-cell;}

    div.center-content-area {width: 40%; margin: 0; padding: 2em;
    background-color: #C9F; display: table-cell;}

    div.right-column {width: 30%; margin: 0; padding: 2em; background-color: #CCC;
    display: table-cell;}

    }

    @media screen and (max-width: 650px) {
    div.columns {background-color:#360; display:table; width: 100%; padding: 0em;}

    div.left-nav-menu {width: 30%;margin: 0; padding: 2em; background-color: #CCC;       
    display: inline-table; }

    div.center-content-area {width: 70%; margin: 0; padding: 2em;
    background-color: #C9F; display: inline-table;}

    div.right-column {width: auto; margin: 0; padding: 2em; background-color: #CCC;
    display: block;}

    }

左列
中柱
右栏
@媒体屏幕和屏幕（最大宽度：990px）{
div.columns{背景色：#360；显示：表格；宽度：100%；填充：0em；}
div.left-nav-menu{宽度：30%；边距：0；填充：2em；背景色：#CCC；
显示：表格单元格；}
分区中心内容区{宽度：40%；边距：0；填充：2米；
背景色：#C9F；显示：表格单元格；}
div.right-column{宽度：30%；边距：0；填充：2em；背景色：#CCC；
显示：表格单元格；}
}
@媒体屏幕和屏幕（最大宽度：650px）{
div.columns{背景色：#360；显示：表格；宽度：100%；填充：0em；}
div.left-nav-menu{宽度：30%；边距：0；填充：2em；背景色：#CCC；
显示：内联表；}
分区中心内容区{宽度：70%；边距：0；填充：2米；
背景色：#C9F；显示：内联表；}
div.right-column{宽度：自动；边距：0；填充：2em；背景色：#CCC；
显示：block；}
}

我用你的代码拼凑了一把小提琴。 我已经编辑了你的HTML和CSS，但它应该可以在Firefox和Chrome中使用

<div class="columns">
  <div class="box left">Left Column</div>
  <div class="box center">Center Column</div>
  <div class="box right">Right Column</div>
</div>

左列
中柱
右栏

---

希望有帮助

谢谢大家!！似乎我需要为990 left、right和center类定义“display”。你有什么推荐的价值吗？而且我似乎不能添加填充物或边框来打破它。有什么建议让文本远离边缘吗？它会断裂，因为填充增加了宽度。我把小提琴改了一点，加了2%的填充物-