如何仅用HTML和CSS实现屏幕宽度小于600px时侧边栏隐藏

这个需求仅用HTML和CSS即可实现，无需使用Java或JavaScript。

你只需要修改代码中的媒体查询规则即可完成效果，原有媒体查询同时将侧边栏和中间列都设为100%宽度，才会出现堆叠效果，调整为如下规则：

@media screen and (max-width: 600px) {
  .column.side {
    /* 直接让侧边栏元素完全隐藏，不占据页面空间 */
    display: none;
  }
  .column.middle {
    /* 中间列占满整行宽度 */
    width: 100%;
  }
}

你之前设置宽度为0%不生效的原因是，.column类自带10px的内边距，即使宽度为0，内边距仍然会占据空间，而display: none会让元素彻底从文档流中移除，完全不显示也不占位置，符合你的需求。

另外你现有代码里有几个小错误可以顺便修正，避免影响其他效果：

• DOCTYPE声明写法错误，正确写法是<!DOCTYPE html>
• 页面的标题标签写法不规范，应该用标准的h系列标签，比如<h1>heading</h1>
• CSS里的.page-wrape:after拼写错误，正确是.page-wrap:after，否则底部粘性footer的效果会异常
• 第二个侧边栏的<p>标签没有闭合，需要补上</p>

内容的提问来源于stack exchange，提问作者Ella