<div class="danger">
  <h2>
 My flex-direction and background color change with the viewport size!
  </h2>
   <h2>
    My flex-direction and background color change with the viewport size!
  </h2>
   <h2>
    My flex-direction and background color change with the viewport size!
  </h2>
</div>
@use cssnext;

:root {
  --fontSize: 1rem;
}

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


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

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


@custom-media --medium-viewport (width >= 600px) and (width <= 1280px);

@media (--medium-viewport) {
  .danger {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    background: teal;
  }
}


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.