CSS.Is is posible to place one element at center of flexbox and one at the right side (large screen) ; but both at center in column in mobile devices?

Question

Is it possible to make my web app more responsive by placing content in a flexbox such that two cells are side-by-side when viewed on larger displays, but then have both of these elements centered in a single column in the viewport when viewed on smaller screens (i.e., mobile devices)?

For example,

1. On larger screens/viewports it should look like this:

2. On smaller screens/viewports (i.e., mobile) it should look like this:

Thank you all. I can't figure it out.

Answer 1

Use a media-query

@media (max-width: 600px) 

and set

flex-direction: column