Question

How do you stack the columns vertically on smaller screens using CSS?

Answer 1

To stack the columns vertically on smaller screens, you can use CSS flex-direction. Here's an example:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

In this example, the CSS code applies a media query and sets flex-direction: column; to the container. This makes the columns stack vertically on screens with a maximum width of 768 pixels.