This is the example developed by Mark Zamoyta in his course Responsive websites
with Bootstrap 3 on PluralSight.
It is not directly his course's material but what I created alonside the course,
so it might contain personal interpretations or experimentations.
Stacks content-first for XS, same 3-cols layout for SM+.
Note: Remember to construct HTML with mobile in mind (Bootstrap is mobile-first).
It is preferable for mobile users that the content is the first section.
Then push / pull columns for "sm" media and above with col-sm-push-* and
col-sm-pull-* (I made a separate branch to try it with order- classes in
Bootstrap 4).
XS stacks all 3 columns. SM displays 2 of them, stacks the 3rd below. MD+ displays all 3 in a row.
Same as Column Drop but this time, for MD displays alone, we place the links in a header row. So that now:
- XS: 3 stacks
- SM: 2 cols + 1 (stacked)
- MD: 1 separate row (header) + 2 cols
- LG+: 3 cols
Drawback: the links section has to be duplicated in the HTML code as the layout is not flexible enough to render this without JavaScript code.
Use CSS3 media queries to "reflow the content" of the range list when width is
small.
In other words, when stacked as a single column the links are now displayed
with smaller images with the text aside, instead of (bigger) images and the text
below.
The navbar comes from Bootstrap templates, with minor style customization. The
dropdown menu for XS devices requires BS scripts to be added : jquery and
bootstrap.js.
We added a feature to shrink the navbar when the user scrolls down. The scroll
detection is done by an external script that toggles a CSS class on our element:
cbp-af-header-shrink. Those JS have to be included:
cbpAnimatedHeader.min.jsclassie.js(dependency - helper to manipulate CSS classes)
Those scripts are to be found here
or in the NPM module: codrops-animated-header.
Additionally to the course's content, I did some more styling to properly handle rendering in all tiers, as the special MD format has been omitted by the author.