Layout Shifter

The layout shifter pattern is the most responsive pattern, with multiple breakpoints across several screen widths.

Key to this layout is the way content moves about, instead of reflowing and dropping below other columns. Due to the significant differences between each major breakpoint, it is more complex to maintain and likely involves changes within elements, not just overall content layout.

This simplified example shows the layout shifter pattern, on smaller screens content is stacked vertically, but changes significantly as the screen becomes larger, with a left div and two stacked div’s on the right.

according to google, img used from google for study uses