Bootstrap uses a grid system, based on 12 columns, with breakpoints for several device sizes, based on media queries:
- xs: very small, such as portrait phones, less than 576 pixels wide
- sm: small, like landscape phones, up to 768 pixels
- md: medium, like tablets, up to 992 pixels
- lg: large, like desktops, up to 1200 pixels
- xl: extra large, over 1200 pixels
These limits aren't hardcoded, and may be changed. Other common values are 1024 and 1440, instead of 992 and 1200. Yet another possibility is considering HD devices (1920x1080) and 4K devices, with a resolution of 2560x1600.
Whenever you place elements, you specify their width in terms of columns, and positions will be arranged depending on the available row space, moving to new rows if need be. You can also allow for different sizing and ordering of elements depending on screen dimensions, and even hide or show components (in full, or partially) depending on available space.