使用媒体查询隐藏/显示<paragraph>

Question

我已经编写了一个网站，但我有一个问题-我有两个不同的段落在同一个div，但其中一个应该显示时，屏幕是600或以上。可以这样做吗？还是我该把我的

在第一个里面的第二个

 <span class="me-square">
            <div class="me-wrapper">
                <h3>ABOUT ME</h3>
                <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
                <p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
    </div></span>

CSS

#me-2ndtext{
    display: none;
} 

@media screen and (min-width: 601px) {
  div#me-2ndtext {
    display: block;
  }
}

Answer 1

我会像这样去

@media screen and (max-width: 601px) {
    #me-2ndtext {
        display: none;
    }
}

Answer 2

简单版

HTML：

<span class="me-square">
    <div class="me-wrapper">
        <h3>ABOUT ME</h3>
        <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
        <p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
    </div>
</span>

CSS：

@media screen and (max-width: 599px) {
    p#me-2ndtext {
        display: none;
    }
}

或者当它一直在第二段的时候，你可以让它像这样：

那你就不需要额外的身份证了。

HTML：

<span class="me-square">
    <div class="me-wrapper">
        <h3>ABOUT ME</h3>
        <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
        <p>I want this text to only show when the screen is 600 or over</p>
    </div>
</span>

CSS：

@media screen and (max-width: 599px) {
    p:nth-of-type(2) {
        display: none;
    }
}