Responsive Web Design Patterns
Layout shifter
The layout shifter pattern is the most responsive to with multiple breakpoints across several screen widths.
The layout shifter pattern is the most responsive to 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.
Sites using this pattern include:
Try it
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.c1, .c2, .c3, .c4 {
width: 100%;
}
@media (min-width: 600px) {
.c1 {
width: 25%;
}
.c4 {
width: 75%;
}
}
@media (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
View full sample
Updated on 2014-04-30
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .