Javascript 在本例中，有没有比使用matchMedia更聪明的方法来重新排列页面元素？

我创建了以下页面布局，但它严重依赖javascript。我尝试过其他更简单的方法来实现这一点，但没有任何方法

只是想知道是否有人有什么好主意可以在没有javascript的情况下实现这种布局

var hero=document.getElementById（'hero'）；
var aside=document.getElementById（'aside'）；
var main=document.getElementById（'main'）；
var smallMql=window.matchMedia（‘（最大宽度：739px）’）；
var mediumMql=window.matchMedia（'（最小宽度：740px）和（最大宽度：979px）'；
var largeMql=window.matchMedia（‘（最小宽度：980px）’）；
函数网格（mql）{
if（mql.matches）{
setAttribute（'style'，'margin top:0'）；
}
}
函数drawMediumGrid（mql）{
if（mql.matches）{
var mainHeight=main.clientHeight；
setAttribute（'style'，'margintop:-'+mainHeight+'px'）；
}
}
函数drawLargeGrid（mql）{
if（mql.matches）{
var mainHeight=main.clientHeight；
var heroHeight=hero.clientHeight；
var totalHeight=mainHeight+heroHeight；
setAttribute（'style'，'margin top:-'+totalHeight+'px'）；
}
}
addListener（drawSmallGrid）；
addListener（drawMediumGrid）；
addListener（drawLargeGrid）；
drawSmallGrid（smallMql）；
drawMediumGrid（mediumMql）；
drawLargeGrid（largeMql）
/**
*网格
*/
英雄
梅因先生{
框大小：边框框；
}
/*内容伪造*/
.hero.module{background:aqua；}
.main.module{背景：红色；}
.aside.module{背景：橙色}
.hero.module，
.main.模块{
最小高度：200px；
}
.旁白.模块{
最小高度：400px；
}
/*网格布局*/
英雄
主要的
.旁白{
左侧填充：15px；
右侧填充：15px；
}
@介质（最小宽度：740px）{
梅因先生{
右边距：330px；
最大宽度：70%；
}
.旁白{
宽度：300px；
浮动：对；
}
}
英雄
主要的
除此之外

我调查了flexbox，但它对于我的布局以及IE10+来说太复杂了。事实上，我记得css calc值，即IE9+，它的工作方式非常好，根本没有javascript：

/**
*网格
*/
英雄
梅因先生{
框大小：边框框；
}
/*内容伪造*/
.module{padding:10px；}
.hero.module{background:aqua；}
.main.module{背景：红色；}
.aside.module{背景：橙色；}
.hero.module，
.main.模块{
最小高度：200px；
}
.旁白.模块{
最小高度：400px；
}
@介质（最小宽度：740px）{
.模块：之后{
显示：内联；
内容：“740px+”；
字体：斜体；
}
梅因先生{
浮动：左；
宽度：计算（100%-330px）；
}
.旁白{
浮动：对；
宽度：300px；
}
}
@介质（最小宽度：980px）{
.模块：之后{
显示：内联；
内容：“980px+”；
字体：斜体；
}
.集装箱{
宽度：计算（100%-330px）；
浮动：左；
}
梅因先生{
浮动：无；
宽度：100%；
}
}

英雄
主要的
除了

在简单的媒体查询中使用flexbox

命令

属性可能…？呃，我甚至没有想到flexbox！我会试试的，谢谢。