W3.CSS Built-In Responsiveness

Responsiveness

W3.CSS includes a responsive, mobile-first grid system to handle layout and the columns will re-arrange automatically depending on the screen size.

w3-half: Occupies 1/2 of the window (on medium and large screens).
w3-third: Occupies 1/3 of the window (on medium and large screens).
w3-twothird: Occupies 2/3 of the window (on medium and large screens).
w3-quarter: Occupies 1/4 of the window (on medium and large screens).
w3-threequarter: Occupies 3/4 of the window (on medium and large screens).
w3-rest: Occupies the rest of the column width.
w3-col: Defines one column in a 12-column responsive grid.
w3-mobile: Adds mobile-first responsiveness to a cell (column). Displays elements as block elements on mobile devices.

The responsive classes above must be placed inside a w3-row class (or w3-row-padding class) to be fully responsive.

w3-row: Container for responsive classes, with no padding.
w3-row-padding: Container for responsive classes, with 8px left and right padding.
w3-content: Container for fixed size centered content.

Using w3 responsive classes & w3-col class: View example (52)
Nested rows: View example (53)
Using w3 responsive classes & w3-rest class: View example (54)
Using w3-content class: View example (55)
Difference between w3-row & w3-row-padding classes: View example (56)
Responsive Show / Hide: The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes: View example (57)
The w3-mobile class adds mobile-first responsiveness to any element. It adds display:block and width:100% to an element on screens that are less than 600px wide. View example (58)