@media 无法让这些部分堆叠

Question

当 window 变小或在移动设备上时，我试图让我的部分的堆栈垂直放置。我正在使用@media only screen and (max-width: 1024px) 命令。这很可能是一些简单的事情，但我看不出我的错误在哪里。任何帮助都将非常受欢迎。谢谢...HTML和CSS如下：

@media only screen and (max-width: 1024px) 

{
 #main
 {
  width: auto;
 }
    
    #brass img
    {
        display: none; 
    }

    #Experience, #Education
 {
        width: 100%; 
  text-align: left;
        float: none;
        height: auto; 
    }
    
    #About
    {
        width: 100%;
 
    }
    
}

#main
{
 width: 900px;
 margin: auto;
}

#logo, header h1
{
 display: inline-block;
 margin-bottom: 0px;
}

#Experience
{
 position: fixed;
 right: 45%;
 top: 20%;
 word-wrap: break-word;
 width: 25%;
 text-align: justify; 
}

#Education
{
 word-wrap: break-word;
 width: 25%;
 position: fixed;
 right: 15%; 
 top: 20%;

<div id="brass">
  <section id="left side"> <img src="pic/brass.png" alt="brass" id="brass" /> </section>
</div>
<div id="Experience">
  <section>
    <h2>Experience</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<div id="Education">
  <section>
    <h2>Education</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<div id="About">
  <section>
    <h2>About Me</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<footer></footer>

Answer 1

你要这个吗？单击 Run code snippet 然后单击 full page 然后调整浏览器大小 window

section {
  float: left;
  width: 25%;
}

@media only screen and (max-width: 1024px) {
  section {
    float: none;
    width: 100%;
  }
}

<div>
  <section id="leftside">
    <div id="brass">
      <img src="pic/brass.png" alt="brass" id="brass" />
    </div>
  </section>
  <section>
    <div id="Experience">
      <h2>Experience</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="Education">
      <h2>Education</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="About">
      <h2>About Me</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <div>
    <footer></footer>

@media 无法让这些部分堆叠

@media Cannot get the sections to stack

html

css

media