How I Moved a React Component Across the DOM Without Losing Its State — A Checkout Story

How I used React Portals and JavaScript media queries to solve a real-world layout problem on a checkout page The Problem Nobody Warns You About You're building a checkout page. On desktop, you have the classic Holy Grail layout, a wide left column with the main form content and a right sidebar with supporting information. Your designer places a coupon/offers component in that right sidebar. Clean. Elegant. Makes sense. Then you open the mobile view. That right sidebar? Gone, because it collapses into a linear single-column layout on smaller screens. The coupon component now needs to live somewhere in the middle of the left column's content flow on mobile. Not at the bottom. Not at the top. Somewhere specific, visible to the user in the first fold. And here's where it gets messier than just "desktop vs mobile." These UI decisions aren't just about two breakpoints. A tablet in portrait mode behaves like a mobile device — single column, linear flow. Rotate it to landscape and suddenly it