Html 为什么不'；调整屏幕大小时，我的flexbox项目显示在下一行

我已经设置了flexbox与我的ul组成的3李项目，他们是完美的工作。当用户达到低于600px的屏幕大小时，我希望我的所有li项目都显示在新行上。这不管用！他们还在同一条线上继续演出吗？出了什么问题

这是我的html：-

<ul>
        <li><h1>My Photography Works</h1></li>
        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
        <li><h3>Contact Me Now</h3></li>
    </ul>

    <ul>
            <li><h1>Published Papers</h1></li>
            <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
            <li><h3>Browse them now</h3></li>
    </ul>

---

将

弹性方向

更改为

列

：

ul{
显示器：flex；
柔性包装：包装；
列表样式：无；
证明内容：之间的空间；
}
李{
边缘底部：10px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
保险商实验室{
弯曲方向：立柱；
}
}
李：第n个孩子（1）{
字体系列：Arial、Helvetica、无衬线字体；
弹性：20%；
}
李：第n个孩子（2）{
字体系列：坎布里亚，科钦，佐治亚州，泰晤士报，“泰晤士报新罗马”，衬线；
字号：18px；
弹性：50%；
}
李：第n个孩子（3）{
字体系列：Arial、Helvetica、无衬线字体；
弹性：10%；
}

这是我的html：-


我的摄影作品


我的同僚们都是精英。如果不存在任何累积和不准确的错误，那么就不存在对照明的质量和区分，因为使用了大量的放射性物质，因此可以解释为不合格



现在联系我




发表论文


我的同僚们都是精英。如果不存在任何累积和不准确的错误，那么就不存在对照明的质量和区分，因为使用了大量的放射性物质，因此可以解释为不合格



现在浏览它们

底线：您需要注意特殊性。您的代码很好，但您的

li:nth-child（）

正在覆盖媒体查询中定义的样式

ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;

    li{
        margin-bottom: 10px;
    }

    @media screen and (max-width: 600px) {
        flex: 100%;
      }

    li:nth-child(1){
        font-family: Arial, Helvetica, sans-serif;
        flex: 20%;

    }

    li:nth-child(2){
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 18px;
        flex: 50%;
    }

    li:nth-child(3){
        font-family: Arial, Helvetica, sans-serif;
        flex: 10%;
    }
}