Html css移动视图不工作

在我的css项目中，我有：

正文有左部分、右部分和页脚..我想当我转到移动视图时，显示应该是

left section
right section
footer

但在这里，我已经尝试了，我得到了

left section,
right section ----->>this section overrides to footer..
footer

JSFIDLE是：

---

我做错了什么

您需要做的是：

• 从

  @media

  查询中的

  #rightcol

  中删除

  最大高度：50px

• 您已经打开了标签，请记住通过关闭标签

---

只需从

.container

中移除

高度，并将其设置为
溢出：隐藏
，当然也要像Tushar所说的那样关闭
标签


*{
保证金：0；
填充：0；
}
身体{
宽度：100%；
字体系列：“CAB”，无衬线；
}
康塔尼尔先生{
边缘顶部：80px；
页边距底部：自动；
右边距：自动；
左边距：自动；
填充：20px；
背景：#fff；
显示：块；
宽度：70%；
-webkit flex:3 1 60%；
弹性：31 60%；
-网络工具包订单：2份；
顺序：2；
/*高度：1500px；*/*已移除*/
溢出：隐藏；/*已添加*/
}
#rightcol{
位置：相对位置；
浮动：对；
背景：绿色；
显示：内联块；
宽度：30%；
左边距：自动；
右边距：自动；
高度：500px；
-webkit flex:1 6 20%；
弹性：1 6 20%；
-网络工具包订单：3份；
顺序：3；
}
#内容{
背景：#fff；
浮动：左；
背景：红色；
位置：相对位置；
显示：内联块；
左边距：自动；
右边距：自动；
宽度：68%；
高度：1500px；
-webkit flex:1 6 20%；
弹性：1 6 20%；
-网络工具包订单：3份；
顺序：3；
}
#登记表{
宽度：100%；
保证金：0px自动；
位置：相对位置；
}
#注册表格.字段集{
/*背景色：#fc9a24*/
边界半径：3px；
}
#登记表图例{
文本对齐：居中；
背景：黑色；
宽度：100%；
填充：30px0；
边界半径：3px3px0；
颜色：白色；
字号：2em；
}
.字段框{
边框：3px实心#fc9a24；
保证金：0自动；
显示：块；
宽度：100%；
填充：30px 20px；
框大小：边框框；
边界半径：0 0 3px 3px；
}
#页脚{
显示：块；
保证金：4倍；
填充物：5px；
最小高度：100px；
边框：1px实心#eebb55；
边界半径：7pt；
背景:#ffeebb ;；
}
@媒体屏幕和屏幕（最大宽度：700px）{
#右col，#内容{
显示：块！重要；
宽度：100%；
}
.contanier，页脚{
-webkit-flex-flow：列；
弯曲方向：立柱；
}
#右col，#内容{
/*将它们返回到文档顺序*/
-网络工具包订单：0；
顺序：0；
}
#rightcol{
最小高度：50px；
}
}

内容部分

基本信息
页脚

对不起，先生，我已经更新了链接..以前我忘了更新整个容器。现在我更新了链接以前我忘了更新整个容器。这是新的链接：