Responsive design question – make divs align horizontal & switch to vertical

[cssflunkie]

On a desktop device I need 4 columns to align left to right horizontally and then switch to vertically aligned on a mobile device. There are only 2 employee records, I need the right div to move under the div directly to its left to form a single column as below. Any thoughts on how to set up the divs to accomplish this? Thanks

Desktop view…

Primary: 555-555-1212 Type: Home
Alternate: 555-555-1414 Type: Work

Mobile view…

Primary:
555-555-1212
Type:
Call

Alternate:
555-555-1414
Type:
Text

[Paulie_D]

Perhaps you could show us the issue in a Codepen demo.

It’s much easier to advise on code we’ve actually seen than work from vague requests.

[wahhabb]

Although you call these columns, they actually look like table entries. You can do what you need by using flexbox. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

[Paulie_D]

Easy enough even without flexbox but I’m not sure what you are going for exactly.

http://codepen.io/Paulie-D/pen/mJJogo

After that it’s just a matter of media queries.

[Author]

Posts