Can I include and exclude html text with media queries? : <p>I've been using media queries quite a bit lately and I'm just trying to figure out what I can and can't change. My question is simple.</p>

<p>Can you choose to exclude or include certain elements with @media queries?</p>

<p>For example, having designed my website for a mobile device I'd like to also expand it and make it available to larger viewports! However with the bigger viewport, I feel like I'd like to add more content but of course, I don't know if I can do that without adding directly to the HTML code and of course if I do that I'll just add a bunch of stuff to my mobile design.</p>

<p>What can I do in this circumstance? </p>

<pre><code>.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }    

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 10fr 1fr;
    grid-template-areas:
      "header header"
      "advert main"
      "footer footer"
    }
</code></pre>
