Referências:
Resize this window to width < 600px.
The mostly fluid pattern consists primarily of a fluid grid. On large or medium screens, it usually remains the same size, simply adjusting the margins on wider screens.
On smaller screens, the fluid grid causes the main content to reflow, while columns are stacked vertically. One major advantage of this pattern is that it usually only requires one breakpoint between small screens and large screens.
The key points are that the grids are flexible, and when it collapses the the columns stay in the same order. Also, at all viewports the order of content on the screen is the same as the order in your HTML.
1 2-3
becomes
1 2 3
In the column drop pattern, content is stacked vertically in the smallest view, but as the screen expands beyond 600px, the primary and secondary content div's take the full width of the screen. The order of the div's is set using the order CSS property. At 800px all three content div's are shown, using the full screen width.
For SEO reasons there's an advantage to have the primary content at the head of your HTML, so say your HTML looked like this:
<main content> <secondary content> <tertiary content>
The column drop pattern will reorder your content so that at wide viewports it's a 3 column layout, main content in the middle.
<tertiary content> <main content> <secondary content>
as the viewport decreases, this changes to
<main content> <secondary content> <tertiary content>
and finally to
<main content> <secondary content> <tertiary content>
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.