We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.

The easiest way to do it would be to use CSS media queries.

.section {
  display: none;
}

@media (min-width: 900px) {
  .section {
    display: block;
  }
} 

However, this would keep the section in the DOM, thus potentially making it less efficient.

Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).

My Question is: When is it better to use one, and when is it fine to use the other?