diff --git a/docs/OVERVIEW.md b/docs/OVERVIEW.md
index d7182d6..789604b 100644
--- a/docs/OVERVIEW.md
+++ b/docs/OVERVIEW.md
@@ -147,18 +147,22 @@ Conventions worth knowing:
 ```
 ┌──────────────────────────────────────────────────────────┐
 │ [book mark] paper-doc   论文  模板              [mark]   │  header
-├──────────────────────────────────────┬───────────────────┤
-│                                      │  模板配置         │  second-level
-│  <RouterView>                        │   模板列表        │  menu, right
-│                                      │   字段管理        │
-└──────────────────────────────────────┴───────────────────┘
+├───────────────────┬──────────────────────────────────────┤
+│  模板配置         │                                      │  second-level
+│   模板列表        │  <RouterView>                        │  menu, left
+│   字段管理        │                                      │
+└───────────────────┴──────────────────────────────────────┘
 ```
 
 The mark appears at both ends of the header. The second-level menu sits on the
-**right** and is driven entirely by `route.meta.section`, so a route declares
+**left** and is driven entirely by `route.meta.section`, so a route declares
 which menu it belongs to and deep links render correctly on first paint. Routes
 without a `section` (the welcome page) show no menu.
 
+Which side the menu lands on follows from its DOM order inside the flex row in
+`App.vue` — first child, left — so moving it is a one-block change there rather
+than a stylesheet override.
+
 ### Routes
 
 | Path | View | Section |
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ad46a14..6c57f21 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,9 +3,9 @@
  * Application shell.
  *
  * Three bands, in this order: a header holding the mark, the two top-level
- * sections, and the mark again at the far right; then the content area; then
- * the second-level menu on the right, present only on routes that declare a
- * `section` in their meta.
+ * sections, and the mark again at the far right; then the row below it, which
+ * is the second-level menu on the left followed by the content area. The menu
+ * is present only on routes that declare a `section` in their meta.
  */
 import { computed } from 'vue'
 import { RouterView, RouterLink, useRoute } from 'vue-router'
@@ -65,11 +65,13 @@ const section = computed(() => (route.meta.section as string | undefined) ?? '')
     </el-header>
 
     <el-container class="app-body">
+      <!-- The second-level menu leads the row. `.app-body` is a flex row, so
+           being first in the DOM is what puts it on the left of the content. -->
+      <SectionAside v-if="section" :section="section" />
+
       <el-main class="app-main">
         <RouterView />
       </el-main>
-
-      <SectionAside v-if="section" :section="section" />
     </el-container>
   </el-container>
 </template>
diff --git a/frontend/src/components/SectionAside.vue b/frontend/src/components/SectionAside.vue
index 7cd7fa8..a67cec6 100644
--- a/frontend/src/components/SectionAside.vue
+++ b/frontend/src/components/SectionAside.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * The second-level menu, pinned to the right of the content area.
+ * The second-level menu, pinned to the left of the content area.
  *
  * It is driven entirely by `route.meta.section`, so the menu a URL belongs to
  * is a property of the route table rather than of component state — deep
@@ -58,7 +58,7 @@ const collapsed = computed(() => appStore.asideCollapsed)
       <span v-if="!collapsed" class="aside-title">{{ menu.title }}</span>
       <el-tooltip
         :content="collapsed ? '展开菜单' : '收起菜单'"
-        placement="left"
+        placement="right"
         :show-after="200"
       >
         <el-button
@@ -94,8 +94,9 @@ const collapsed = computed(() => appStore.asideCollapsed)
 .app-aside {
   display: flex;
   flex-direction: column;
-  /* The wrapper owns the border so it stays put while the menu scrolls. */
-  border-left: 1px solid var(--el-border-color);
+  /* The wrapper owns the border so it stays put while the menu scrolls. The
+     rail sits at the left edge, so the separator goes on its right. */
+  border-right: 1px solid var(--el-border-color);
   background-color: var(--el-bg-color);
   overflow: hidden;
 }
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 9822875..16bcaf6 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -86,9 +86,12 @@ samp {
    The shape is:
 
      .app-shell            column: header over .app-body
-     .app-body             row:    .app-main over .app-aside (if present)
+     .app-body             row:    .app-aside (if present) then .app-main
      .app-main             the single scroll container
      .app-aside            fixed-width rail, scrolls independently
+
+   Which side the rail lands on is decided by its DOM order inside the row,
+   not by a rule here: first child means left.
    --------------------------------------------------------------------------- */
 
 .app-shell {
@@ -156,8 +159,8 @@ samp {
   background-color: var(--el-text-color-placeholder);
 }
 
-/* The second-level menu on the right. Its own width is set by the component,
-   so only the shrink behaviour belongs here. */
+/* The second-level menu, to the left of the content. Its own width is set by
+   the component, so only the shrink behaviour belongs here. */
 .app-aside {
   flex: 0 0 auto;
   min-height: 0;