Responsive Organization Chart (updated)

Position Name
Name Surname
AA
Position Name
Name Surname
AA
Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA
Position Name
Name Surname
AA

Position Name
Name Surname
AA
Position Name
Name Surname
AA

Position Name
Name Surname
AB
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
Position Name
Name Surname
AB
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
Position Name
Name Surname
AB
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
Position Name
Name Surname
AB
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
Position Name
Name Surname
AB
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
- Position Name
  Name Surname
  BB
Position Name
Name Surname
AB
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
- Position Name
  Name Surname
  CC
Position Name
Name Surname
AB
- Position Name
  Name Surname
  AA
- Position Name
  Name Surname
  BB

This is an updated version of "Responsive Organization Chart" from Ronny Siikaluoma's Pen Responsive Organization Chart.

Improvments:

media queries are separated in one place only and not all over the css (more control on it)
3 new style of line (a 3 block column line; a 2 block column block line; a single block line)
use SCSS to maange easly varaibles and breakepoint
separated the list of departments from board area (more control and less ul insie ul inside ul inside ul)
7 column on the department area

Responsive Example

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AA

Position Name
Name Surname
AB

Position Name
Name Surname
AA

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
AB

Position Name
Name Surname
CC

Position Name
Name Surname
AA

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
AB

Position Name
Name Surname
AA

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
AB

Position Name
Name Surname
AA

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
AB

Position Name
Name Surname
AA

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
BB

Position Name
Name Surname
AB

Position Name
Name Surname
CC

Position Name
Name Surname
AA

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
CC

Position Name
Name Surname
AB

Position Name
Name Surname
AA

Position Name
Name Surname
BB