How can you make items stack vertically on mobile and horizontally on desktop using Flexbox?

We have a simple navigation bar with three links. How would you write the CSS so that on screens narrower than 600px the links stack vertically, but on wider screens they appear side‑by‑side using Flexbox?

If you set flex-direction: column on a container and then add a media query for larger screens, which property would you change to make the items lay out horizontally?

What CSS would you add to ensure the items wrap correctly when the viewport changes from mobile to desktop?

Our product page uses a Flexbox container for feature cards. On mobile they stack correctly, but on desktop they still appear stacked. Walk me through how you'd debug this and what changes you'd make.

We need to support both portrait and landscape tablets, stacking vertically in portrait and horizontally in landscape. How would you implement this with Flexbox and media queries, and what trade‑offs would you consider?

Explain why adding width: 100% to the flex items broke the horizontal layout on desktop, and how you'd fix it.

Our site has a global Flexbox grid component used across dozens of pages. We now need it to switch between column and row layouts based on breakpoint, but also support legacy browsers that lack flex-direction. How would you design this component to be maintainable and performant?

Discuss the impact of using flex-basis versus fixed width in the responsive Flexbox layout for large data tables, especially regarding reflow and paint performance on mobile devices.

We want to add a CSS custom property to control the breakpoint for switching layout direction across the whole design system. How would you implement this and ensure consistency without causing specificity wars?

Our company is migrating a monolithic CSS codebase to a design system built with CSS‑in‑JS. The new system must allow components to automatically switch between vertical and horizontal orientation based on device type. How would you architect the solution to minimize duplication and support future breakpoints?

Several teams have built their own responsive Flexbox utilities, leading to inconsistent breakpoints and naming. As a staff engineer, how would you lead a refactor to unify these utilities, and what governance process would you put in place?

Consider a scenario where we need to support server‑side rendering of critical CSS for above‑the‑fold content, including the responsive Flexbox layout. How would you ensure the correct layout is applied on first paint for both mobile and desktop users without a flash of unstyled content?