What I want to achieve is this:

Wide screen: (left width:200px) (middle min-width:800px) (right width:200px) but if (middle 800px) doesn’t fit the screen, i.e. screen width is less than 1000px, then stack them as on a small screen.

Small screen: all stacked up vertically, i.e. (middle width:100%) (left width:100%) (right width:100%). Notice that (middle) is on top of the stack.

Can we do this with pure CSS (grid and @media perhaps?) or do we need Javascript?

I tried a number of grid CSS including the one on this post but no luck.