如何使用CSS媒体查询实现aside侧边栏在移动端居中并位于页面底部

问题原因 #

你的媒体查询规则中使用的侧边栏选择器和实际HTML里的侧边栏ID不匹配：代码里你写的选择器是aside#sidebar，但页面中实际的关于页侧边栏ID是about-sidebar，服务页侧边栏ID是service-sidebar，导致移动端适配规则没有命中侧边栏元素，所以没生效。

修复方案 #

替换你现有CSS里的媒体查询部分代码即可：

/*MEDIA QUERIES*/
@media(max-width: 768px){
    header #branding,
    header nav,
    header nav li,
    #boxes .box,
    article#main-col,
    /* 替换成实际的侧边栏ID */
    aside#about-sidebar,
    aside#service-sidebar {
        float: none;
        text-align: center;
        width: 100%;
    } 
    /* 额外加规则让侧边栏的图片也居中，避免错位 */
    aside#about-sidebar img,
    aside#service-sidebar img {
        margin: 0 auto;
        display: block;
    }
    header {
        padding-bottom: 20px;
    }

    #showcase h1 {
        margin-top: 40px;
    }
}

修改后移动端访问时，侧边栏会自动取消浮动，宽度撑满父容器，内容居中对齐，自然排列在主内容区域的下方，符合预期效果。

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