窗口缩放时Flex Box Order失效，脚本加载侧边栏页面布局异常求助

首页布局正常，但通过jQuery加载header、侧边栏的新页面，在窗口缩放时Flex Box的order属性失效，移动端无法按预期顺序排列布局。

1. 容器ID错误：HTML中flex容器的id写为id="flex;"，多了一个分号，导致CSS里的#flex选择器无法匹配该容器，Flex布局规则不生效。
2. order属性作用对象错误：CSS中把order属性加在了侧边栏的内部div（#leftSidebar、#rightSidebar）上，但Flex的order属性只对flex容器的直接子元素生效，当前flex容器的直接子是<aside>和<main>，所以原设置的order根本没起作用。

1. 修正flex容器的id，移除多余分号，改为id="flex"。
2. 将order属性转移到flex容器的直接子元素上：给左侧的<aside>设置order:1，<main>设置order:2，右侧的<aside>设置order:3；在移动端媒体查询中，调整<main>的order为1，两个<aside>分别为2和3。

HTML #

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>welcome to the ricebowl</title>
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script> 
    $(function(){
      $("#header").load("/header.html"); 
    });
    </script> 
    <script> 
    $(function(){
      $("#leftSidebar").load("/ls.html"); 
    });
    </script> 
    <script> 
    $(function(){
      $("#rightSidebar").load("/rs.html"); 
    });
    </script>
</head>
<body>
<div id="container">
<div id="topBar"><marquee>SITE UNDER CONSTRUCTUMALATIONS. SITE UNDER CONSTRUCTUMALATIONS. SITE UNDER CONSTRUCTUMALATIONS.</marquee></div>
<div id="header" style="margin-bottom: 10px;"> </div>
  <div id="flex">
    <aside class="left-aside">
     <div id="leftSidebar"></div>
    </aside>
      <main>
        <h1>writing masterlist</h1>
        <p><strong><i>a collection of works</i></strong></p>
        <img src="/blinkies/seadiv.png" style="width:100%;">
        <p>my disdain for online indicators, notifications, and read receipts </p>
        <p>on romance, as an anti-romantic hopeless romantic </p>
        <p>the commercialization of art </p>
      </main>
    <aside class="right-aside">
      <div id="rightSidebar"></div>
    </aside>
  </div>
</div>
<footer id="footer" style="margin-top: 10px; font-size: 11px;">footer</footer>
</body>
</html>

CSS #

:root {
  --header-image: url('https://i.pinimg.com/564x/a4/1d/07/a41d079e7d36f6b70a1e56c8b7e97e71.jpg');
  --body-bg-image: url(https://sadhost.neocities.org/images/tiles/water2.webp);
  --content: #06B4B2;
}

@font-face {
  font-family: DM Mono;
  src: url('/fonts/DMMono-Regular.ttf') format("truetype");
}

@font-face {
  font-family: DM Mono;
  src: url('/fonts/DMMono-Medium.ttf') format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: DM Mono;
  src: url('/fonts/DMMono-Italic.ttf') format("truetype");
  font-style: italic;
}

@font-face {
  font-family: DM Mono;
  src: url('/fonts/DMMono-MediumItalic.ttf') format("truetype");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: Caprasimo;
  src: url('/fonts/Caprasimo-Regular.ttf') format("truetype");
}

body {
  font-family: 'DM Mono', monospace;
  margin: 0;
  background-color: #06B4B2;
  background-size: 65px;
  color: #FAF8EE;
  background-image: var(--body-bg-image);
}

* {
  box-sizing: border-box;
}

#container {
  max-width: 900px;
  margin: 0 auto;
}

#container a {
  color: #71FFFC;
  font-weight: bold;
  text-decoration: none;
}

#container a:hover {
  color: #06B4B2;
  font-weight: bold;
}

#header {
  width: 100%;
  background-color: #06B4B2;
  height: 150px;
  background-image: var(--header-image);
  background-size: 100%;
}

#navbar {
  height: 40px;
  background-color: #13092D;
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: #ED64F5;
  font-weight: 800;
  text-decoration: none;
}

#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

#flex {
  display: flex;
}

aside {
  background-color: transparent;
  width: 200px;
  padding: 0px;
  font-size: smaller;
}

.left-aside {
  order: 1;
}

main {
  background-color: #0C5172;
  border-radius: 10px;
  flex: 1;
  order: 2;
  padding: 20px;
}

.right-aside {
  order: 3;
}

footer {
  background-color: #061236;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}

h1,
h2,
h3 {
  color: #2FE4EB;
  font-family: 'Caprasimo'
}

h1 {
  font-size: 25px;
}

strong {
  color: #2FE4EB;
}

hr.dashed {
  border: none;
  border-top: 2px dashed #2FE4EB;
}

.box {
  background-color: #061236;
  border-radius: 10px;
  border: 1px dashed #2CEAF2;
  padding: 10px;
}

.sbbox {
  background-color: #0C3172;
  border: 3px solid transparent;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
}

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #061236;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }
  
  main {
    order: 1;
  }

  .left-aside {
    order: 2;
  }

  .right-aside {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}

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