Using @media all and (max-width:1017px) to address flex-wrap: wrap

Question

Some pages on my website have an <aside> and an <article> under a <main> which serves as a flex container. When the window narrows I want the <aside> to disappear. Most of my Google research says I should use JavaScript to accomplish this. However, I recently found that CSS has a native "if-like" function which I shared in a code section below.

I've tried out the CSS "if-like" function and it looks to be working fine in Firefox and Chrome. It also lets me add padding to the footer so the text isn't right against the window sides. However, the max-width: 1017px; makes me wonder if it will work in other browsers or mobile browsers considering the content itself doesn't exceed 1000px.

Did I find a good solution to my problem or should I try a JavaScript solution instead?

main {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
}
article {
  flex-basis: calc( 1000px - 12em );
  flex-grow: 1;
  min-width: 375px;
}
aside {
  min-width: 12em;
}
footer {}
@media all and (max-width: 1017px) { /* not sure why it doesn't fire for 1000px */
  aside {
    display: none;
  }
  footer {
    padding-right: 10px;
    padding-left: 10px;
  }
}