<div class="danger">
  <h2>
 Benim flex-direction'um ve arka plan rengi küçük ekranlarda değişir!
  </h2>
   <h2>
    Benim flex-direction'um ve arka plan rengi küçük ekranlarda değişir!
  </h2>
   <h2>
    Benim flex-direction'um ve arka plan rengi küçük ekranlarda değişir!
  </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; 
  }
}