flex box, main with side panel. test. 2026-04-29

xtodo

on a web page, i want a nav panel of 200px on left, and main on right, the nav panel will show on left only if viewport is 1100px wide or larger, else show at bottom. show how.

How it works

  • Uses Flexbox for the layout.
  • On wide viewports (≥ 1100px): default flex row → nav stays left at 200px.
  • On narrower viewports (≤ 1099px): flex-direction: column-reverse → nav appears at the bottom while main content stays on top.
  • Fully responsive, no JavaScript required.
  • Handles scrolling independently on both panels.

Just copy the code into an .html file and open it in a browser. Resize the window to test the breakpoint. You can adjust the 1099px value if you prefer a different cutoff.

This is the main content. On screens ≥ 1100px wide, the nav sits on the left (200px). On smaller screens the nav moves to the bottom.

Try resizing your browser window to see the behavior.

Tall content area for scrolling demo