<div class="danger">
  <h2>
 My flex-direction and background color change on small screens!
  </h2>
   <h2>
    My flex-direction and background color change on small screens!
  </h2>
   <h2>
    My flex-direction and background color change on small screens!
  </h2>
</div>
@use cssnext;

:root {
  --fontSize: 1rem;
}

/** Styles when > media query */
.danger {
  background: orange;
  display: flex;
  font-family: sans-serif;
}

@custom-media --small-viewport (max-width: 600px);

@media (--small-viewport) {
  /* styles for small viewport */
  .danger {
      flex-direction: column;
     background-color: rebeccapurple; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.