3 column desktop 1 column mobile without media query

Question

I try to avoid media query, how can I use flexbox to achieve 3 column layout on big screen but single column in mobile?

https://codesandbox.io/s/new?utm_source=dotnew&file=/src/styles.css

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
}

.box {
  flex: 0 0 300px 0;
  border: 1px solid;
  gap: 10px;
  width: 100%;
}

I'm not sure why the gap: 10px; doesn't work.