Скрыть / Показать <paragraph>с медиа-запросом

Question

Я закодировал сайт, но у меня есть вопрос - у меня есть 2 разных абзаца в одном и том же разделе, но один из них должен отображаться только когда экран 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

Я бы go хотел бы

@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;
    }
}