如何实现侧边栏拆分式的移动端响应式布局？

我正在根据某设计图开发布局，当前完成的代码如下：

HTML代码 #

<div class="root-wrapper">
    <div class="sidebar">
      <div id="logo">
          <img src="https://www.logodesign.net/logo/line-art-house-roof-and-buildings-4485ld.png?size=2" width="250" />
      </div>
      
      <nav class="nav flex-column">
        <a class="nav-link" href="#">
          Dashboard
        </a>
      </nav>
    </div>
    
    <div class="content d-block d-xxl-flex">
        <div class="main">
            Content
        </div>

        <div class="aside d-none d-xxl-block">

        </div>
    </div>
</div>

CSS代码 #

body {
    background: linear-gradient(75deg, #e2ceff 0%, #e9eaff 100%);
}

.root-wrapper {
    margin: 3% 5%;
    padding: 10px 10px 10px 0;
    background-color: #5955b3;
    border-radius: 3rem;

    display: flex;
    flex-direction: row;
    overflow: hidden;

    .content {
        border-radius: 2.8rem;
        background-color: #fff;
        flex-grow: 7;

        display: flex;
        flex-direction: row;
        overflow: hidden;
        min-height: 800px;

        .main {
            flex-grow: 6;
            padding: 2.7rem 2rem;

            .page-description {
                padding: 1rem 0;
            }

            .card {
                h2 {
                    color: #303030;
                    font-weight: 800;
                }

                &.card-1 {
                    background-color: #f4f4fe;
                }
                
                &.card-2 {
                    background-color: #f7ecfc;
                }

                &.card-3 {
                    background-color: #fbecf1;
                }
            }

            .card-footer {
                padding: 1.7rem 1rem;
            }
        }

        .aside {
            flex-grow: 4;
            background-color: #f9f8fd;
            min-width: 150px;
            max-width: 150px;
        }
    }

    .sidebar {
        flex-grow: 1;
                min-width: 300px;
                max-width: 300px;
            width: 100%;

        #logo {
            text-align: center;
            margin: 1rem 0 2rem 0;
        }

        nav {
            font-size: 1.12rem;
            gap: 1rem;

            .nav-link {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 1.5rem;

                color: #c6d3fa;
                font-weight: 800;
                border-left: 6px solid transparent;

                &:hover {
                    color: #e4cda4;
                }

                &.active {
                    border-color: #fdf2d8;
                    color: #fdf2d8;
                }

                &.disabled {
                    color: #6b8aca;
                }
            }
        }
    }
}

我需要实现的响应式效果：移动端布局中，logo位于顶部，主内容紧随logo下方，侧边栏的导航部分移到主内容下方。请问该如何调整代码实现这个效果？

要实现目标中的移动端布局，你需要拆分原有HTML结构，并配合媒体查询修改CSS规则，具体操作如下：

1. 重构HTML结构 #

把logo拆分成桌面端/移动端两个版本，同时把导航也拆分为两份，分别放在桌面侧边栏和移动端内容区下方：

<div class="root-wrapper">
    <!-- 移动端专属logo，默认隐藏，小屏幕显示 -->
    <div id="logo" class="mobile-logo">
        <img src="https://www.logodesign.net/logo/line-art-house-roof-and-buildings-4485ld.png?size=2" width="250" />
    </div>
    
    <!-- 桌面端侧边栏，大屏幕显示 -->
    <div class="sidebar desktop-sidebar">
        <div id="logo">
            <img src="https://www.logodesign.net/logo/line-art-house-roof-and-buildings-4485ld.png?size=2" width="250" />
        </div>
        
        <nav class="nav flex-column desktop-nav">
            <a class="nav-link" href="#">Dashboard</a>
        </nav>
    </div>
    
    <div class="content d-block d-xxl-flex">
        <div class="main">Content</div>
        
        <!-- 移动端专属导航，默认隐藏，小屏幕显示 -->
        <nav class="nav flex-column mobile-nav">
            <a class="nav-link" href="#">Dashboard</a>
        </nav>
        
        <div class="aside d-none d-xxl-block"></div>
    </div>
</div>

2. 添加响应式CSS规则 #

通过媒体查询控制不同屏幕下元素的显示状态和布局方向：

/* 桌面端样式保持原有逻辑，新增媒体查询适配小屏幕 */
@media (max-width: 1399.98px) {
    .root-wrapper {
        flex-direction: column;
        padding: 10px; /* 移除左侧padding，适配垂直布局 */
    }
    
    /* 隐藏桌面端侧边栏 */
    .desktop-sidebar {
        display: none;
    }
    
    /* 显示移动端logo */
    .mobile-logo {
        text-align: center;
        margin: 1rem 0;
    }
    
    .content {
        flex-direction: column;
        min-height: auto; /* 取消固定高度，适配内容 */
    }
    
    /* 配置移动端导航样式，和原侧边栏风格统一 */
    .mobile-nav {
        background-color: #5955b3;
        padding: 1.5rem;
        margin-top: 1rem;
        border-radius: 1.5rem;
        font-size: 1.12rem;
        gap: 1rem;
    }
    
    .mobile-nav .nav-link {
        color: #c6d3fa;
        font-weight: 800;
        border-left: 6px solid transparent;
        padding: 0.8rem 1rem;
        border-radius: 0.8rem;
        
        &:hover {
            color: #e4cda4;
            background-color: rgba(255,255,255,0.1);
        }
        
        &.active {
            border-color: #fdf2d8;
            color: #fdf2d8;
            background-color: rgba(255,242,216,0.1);
        }
    }
}

/* 大屏幕下隐藏移动端元素 */
@media (min-width: 1400px) {
    .mobile-logo, .mobile-nav {
        display: none;
    }
}

说明 #

• 拆分元素是为了在不同屏幕下精准控制显示位置，避免复杂的DOM移动操作
• 移动端导航复用了原侧边栏的颜色和交互逻辑，保持视觉一致性
• 可以根据实际需求调整媒体查询的断点值，适配更多设备尺寸

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