Hide/Show <paragraph> with media query - html

Question

I've coded a site, but I have a question - I have 2 different paragraphs in the same div, but one of them should only show when the screen is 600 or over. Can it be done this way? or should I wrap my in a secondary inside the first
<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

I would go like this
#media screen and (max-width: 601px) {
#me-2ndtext {
display: none;
}
}

Answer 2

Simple Version
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;
}
}
Or when it's all times the second paragraph you can make it like this:
You don't need the extra id then.
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;
}
}