Hacker News new | ask | show | jobs
by Izkata 859 days ago
You'd do it with media queries and make different grids for different screen sizes. If anything it's more flexible than bootstrap because you can change element order as well.
1 comments

https://getbootstrap.com/docs/5.3/layout/columns/#reordering

Bootstrap grid system is super complete, and probably better coded that anything I can make. Its also available as a standalone module, so the size is pretty small. I just wanted it integrated to PicoCSS because I'm lazy.

A really quick example of switching between desktop and mobile page layouts at 800px:

  @media (min-width: 800px) {
     #page {
        grid-template-areas:
           "header header"
           "menu   content"
           "footer footer";
     }
  }
  @media (max-width: 800px) {
     #page {
        grid-template-areas:
           "header  menu"
           "content content"
           "footer  footer";
     }
  }