Let's read a two-box row that reflows on small screens, and trace exactly when each rule applies.
.row { display: flex; gap: 12px; } and .box { background: #3E5AA6; color: white; padding: 16px; flex: 1; } are the DEFAULT rules these apply on every screen size, all the time, arranging the two boxes side by side with flex: 1 making them share equal width.
@media (max-width: 600px) { .row { flex-direction: column; } } is different: it's conditional. On any screen 601px or wider, the browser completely ignores what's inside these curly braces the row stays side by side, exactly as the default rules describe. But the moment the browser window shrinks to 600px or narrower (like on a phone), this rule activates and OVERRIDES the row's direction, stacking the same two boxes vertically instead.
Notice: we didn't need two separate versions of the HTML, or two separate .box rules the exact same markup and box styling works at every size. Only flex-direction on the parent .row changes, and only within that narrow screen range. This single override is the entire mechanism behind a responsive layout: one small, conditional rule reshaping how the same content is arranged.