Jquery 一个带有屏幕大小的快速div位置

因此，我有2个

元素，一个带有标题和文本段落，另一个带有谷歌地图

HTML:

在css中，我添加了：

#info-box{display:flex;}
#info{width:100%;}
#mapTable{width:300px;}

这次没有JS了

问题是IE不理解display属性中的flex值。。。有人知道我怎么解决这个问题吗

此小提琴显示固定元素和相对元素切换时其doe的方式（固定元素在左侧，相对元素在右侧）：

但我需要另一种方式

@media all and (min-width:600px){
    div{
        display:inline;
        margin-left:/*some amount*/
    }       
}

@media all and (max-width:599px){
    div{
        display:block;
    }       
}

---

演示：

为什么不改用CSS@media querys？提示一下，您可以在同一元素上链接jquery命令。比如

$（'#info'）.css（'width'，'100%'）.css（'float'，''）如果这是您感兴趣的路线，那么有一些可能会有所帮助。除了“最近的浏览器”之外，以低于768的速度查看您的页面的可能性非常小。不要浪费你的时间和精力去迎合那些浏览器只有一半屏幕大小的IE8用户（有人知道IE8用户是这样使用他们的浏览器的吗？）使用媒体查询并为IE8用户设置一个固定的机身宽度，这样他们就可以在你可以接受的任何宽度下看到一个水平滚动条。是的，这是对使用CSS媒体查询的投票，但不要使用媒体查询polyfill，IE8 JS/渲染引擎将几乎无法处理它，因此，使用polyfill是有意义的。恐怕这没有帮助。这种行为很好，但固定块应该在右边。我尝试过交换float属性并将值改为right，但是运气不好，div会跳到下一行。你想让“nav”在右边吗？容易的。给你：谢谢，这正是我需要的。
<div id="info-box">
<div id="info">
<h1>TITLE</h1>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<table id="mapTable"><tr><td>
<div id="map-canvas"></div>
</td></tr><tr><td>
<h2 id="mapLink">TEXT TEXT...</h2>
</td></tr></table>
</div>

#info-box{display:flex;}
#info{width:100%;}
#mapTable{width:300px;}

@media all and (min-width:600px){
    div{
        display:inline;
        margin-left:/*some amount*/
    }       
}

@media all and (max-width:599px){
    div{
        display:block;
    }       
}

#left {
    background: #f00;
    height: 200px;
}
#right {
    overflow: hidden;
    background: #0f0;
    height: 200px;
}

@media all and (min-width:600px){
    #left {
        float: left;
        width: 180px;
    }
    #right {
        margin-left: 180px;
    }
}