Responsive Web Design with drastic layout changes

Question

I've always wondered about this.

Even with media queries, how would I significantly change the placement of things(since I'm not modifying element placement in HTML directly).

For example, if social Facebook/Twitter links appear somewhere in the middle of the page(with their HTML container elements nested in a bunch of other parent tags), how would I go about moving that to the bottom of the page(or, to make it look like they are nested in a different section).

Answer 1

You have at least two options:

1. Change the positioning of the container element. Instead of static position (default behavior), you can use position: absolute or position: fixed to move it to a totally different place on your page.

2. Repeat the elements in two different places, and set one of them visible depending on a screen size.

I must add, however, that in a good design such measures are rarely necessary. You do not want to confuse your users by moving the elements to a totally different location. A better approach is to use a responsive grid (for example, changing the layout from three columns to two, or from two to one, when a screen gets smaller), collapse tabs into a drop-down list, etc., but keep the position of different elements relatively stable.

Answer 2

Moving to the bottom of the page wouldn't be a big deal. Depending on the parent container, use position:absolute or position:fixed and adjust the z-index of this and the parent container.

However, if you wanted to re-order your containers for specific media queries, you'll either have to give absolute positioning to more elements, adjust your floats, or use Javascript.

If this is a client request, I would personally revisit the wireframe stage and plan your responsive behavior from scratch.

Answer 3

You never ever can assume height of elements for sure from a CSS perspective: user will zoom a bit or a lot, images included or not; images won't appear because of network problem or by user choice, etc. Thus position: absolute is a recipe for future or immediate failure (and fixed not what you're searching for).

You can play with:

• flexbox (horizontal or vertical, natural or reverse order)
• display: table-(header|footer)-group or display: table-caption along with table-cell and if possible with parent element having display: table (with or without table-layout: fixed ) or table-row
• floats and Block Formatting Context effects (such a powerful beast)
• nope: CSS Grid Layout is IE10 and IE11 only

If you want to move an element from somewhere inside some other element far away both in HTML and visually, then go with JS/jQuery. CSS doesn't allow for complex manipulations. Just make sure that you watch for resize both from and to desktop/mobile resolutions (and allow for initial manipulation and after some AJAX event) and don't fire 100+ events per second when resizing