Why do responsive themes/websites often collapse the top navigation bar into a menu button a lot before the space available becomes too short to hold it?
It sounds to me that the default action with both Bootstrap and Zurb is to stack the columns when the width is smaller, or possibly make them disappear completely. Is my understanding correct? If so, is this behavior customizable? Could one for example make a right column come on top instead of the bottom when the columns are stacked?
They do it just to work with any amount of menu items usually. I don't like this approach personally... hiding primary navigation behind a click/touch drives me nuts.
If your column comes before in HTML then it will come before when everything is stacked up in mobile resolutions.
The behavior to hide something is of course customizable. Bootstrap comes with certain classes [0] which can hide the content on mobile screens and show on desktop.
Are you saying (reminder, newbie here :-)) that it is possible to have a column come before in HTML and still appear right on the screen? Else, this means it is not possible to change the order in which the columns stack beyond what can be achieved using a nested grid.
The link above does suggest why the navigation bars collapse too soon sometimes (and sometimes too late). The collapse event is tied to the horizontal resolutions at 768, 992 and 1200 px, and does not depend on how much width the navigation bar actually needs (such that it is collapsed only when space available for it is too small).
If the column comes before in HTML then it will appear before as well according to the Bootstrap conventions laid out. However you are more than welcome to throw that all out and have the column to appear left, right, top, bottom wherever you want with simple CSS.
In terms of navigation, it is tied to resolution because it's easier to change code than to change devices owned by your users :)
Why do responsive themes/websites often collapse the top navigation bar into a menu button a lot before the space available becomes too short to hold it?
It sounds to me that the default action with both Bootstrap and Zurb is to stack the columns when the width is smaller, or possibly make them disappear completely. Is my understanding correct? If so, is this behavior customizable? Could one for example make a right column come on top instead of the bottom when the columns are stacked?