<div class="content">
  <h1>Responsive Organization Chart (updated)</h1>
  <figure class="org-chart cf">
    <div class="board ">
      <ul class="columnThree">
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
      </ul>
      <ul class="columnOne">
        <li>
          <span class="lvl-b">
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
      </ul>
      <ul class="columnTwo">
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
      </ul>
      <ul class="columnTwo">
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
        <li>
          <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span>
        </li>
      </ul>
    </div>
    <ul class="departments ">
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
        </ul>
      </li>
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
        </ul>
      </li>
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
        </ul>
      </li>
      <li class="department central">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
        </ul>
      </li>
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
        </ul>
      </li>
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span>
          </li>
        </ul>
      </li>
      <li class="department ">
        <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span>
        <ul class="sections">
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span>
          </li>
          <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span>
          </li>
        </ul>
      </li>
    </ul>
  </figure>
  <p>
    This is an updated version of "Responsive Organization Chart" from <a href="https://codepen.io/siiron/">Ronny Siikaluoma</a>'s Pen <a href="https://codepen.io/siiron/pen/aLkdE/">Responsive Organization Chart</a>.
  </p>
  <h2>Improvments:</h2>
  <ul>
    <li>media queries are separated in one place only and not all over the css (more control on it)</li>
    <li>3 new style of line (a 3 block column line; a 2 block column block line; a single block line)</li>
    <li>use SCSS to maange easly varaibles and breakepoint</li>
    <li>separated the list of departments from board area (more control and less ul insie ul inside ul inside ul)</li>
    <li>
      7 column on the department area
    </li>
  </ul>
  <h1>Responsive Example <h1>
    <div class="responsive-content">
       <figure class="org-chart cf">
      <div class="board ">
         <ul class="columnThree">
            <li>
               <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
            <li>
               <span  >
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
            <li>
               <span  >
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
         </ul>
         <ul class="columnOne">
            <li>
               <span class="lvl-b">
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
         </ul>
         <ul class="columnTwo">
            <li>
               <span  >
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
            <li>
               <span  >
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
         </ul>
         <ul class="columnTwo">
            <li>
               <span>
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
            <li>
               <span  >
               <strong>Position Name</strong>
               <br>Name Surname
               <br>AA
               </span> 
            </li>
         </ul>
      </div>
      <ul class="departments ">
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department central">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>CC
                  </span> 
               </li>
            </ul>
         </li>
         <li class="department ">
            <span class="lvl-b">
            <strong>Position Name</strong>
            <br>Name Surname
            <br>AB
            </span> 
            <ul class="sections">
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>AA
                  </span> 
               </li>
               <li class="section"> <span>
                  <strong>Position Name</strong>
                  <br>Name Surname
                  <br>BB
                  </span> 
               </li>
            </ul>
         </li>
      </ul>
   </figure>
    </div>
</div>
/* Varaibles - config */
$linePx: 2px; 
$borderPx: 3px;
$screen-sm: 767px;
$color1: #92D4A8;
$color2: green;
$subcolor1: orange;
$subcolor2: black;
$pageBG:  #F5EEC9;
/* SCSS*/
body{
  background:$pageBG;
}
.content{
	font-family:Verdana;
	font-size:14px;
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	position: relative;
}

.org-chart{
	display:block;
	clear: both;
	margin-bottom: 30px;
	position: relative;
	&.cf:before,
	&.cf:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}
	&.cf:after {
		clear: both;
	}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
&.cf {
	*zoom: 1;
}
ul{
	padding: 0;
	margin: 0;
	list-style: none;		
}
ul li{ position: relative;}
ul li span{
	display: block;
	border:  $borderPx solid $subcolor1;
	text-align: center;
	overflow: hidden;
	text-decoration: none;
	color: $subcolor2;
	font-size: 12px;
	box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
	-webkit-transition: all linear .1s;
	-moz-transition: all linear .1s;
	transition: all linear .1s;
	background: $color1;
	padding: 4px; 
}

/* Box colors */ 
.lvl-b { background: $color2; color:$color1;  } 
.board{
	width:70%;
	margin: 0 auto;

	display: block;
	position: relative;

	&:before{
		content: "";
		display: block;
		position: absolute;
		height: 600px;
		width: 0px;	
		border-left:  $linePx solid $subcolor1;
		margin-left: 49%;
		top:  15px; 
	}
}
/* 1 column */
ul.columnOne{
	height:90px;
	position: relative;
	width: 100%;
	display: block;
	clear: both;
	li{
		width:30%;
		margin: 0px auto;
		top:20px;
	}
}

/* 2 column */
ul.columnTwo{
	position: relative;
	width: 100%;
	display: block;

	height:90px;
	clear: both;
	li:first-child{
		width:30%;
		float: left;
	}
	li{
		width:30%; 
		float: right;
	}
	&:before{
		content: "";
		display: block;
		position: relative;
		width: 80%;
		height: 10px;	
		border-top:  $linePx solid $subcolor1;
		margin: 0 auto;
		top: 40px;  
	}
}
/* 3 column */
ul.columnThree{ 
	position: relative;
	width: 100%;
	display: block;
	clear: both;
	li:first-child{
		width:30%;
		float: left;
		margin-left:0;
	}
	li{  	 
		width:30%; 
		margin-left:5%;
		float: left;
	}
	li:last-child{ 
		width:30%;  
		float: right;
		margin-left:0;
	}
	&:before{
		content: "";
		display: block;
		position: relative;
		width: 80%;
		height: 10px;	
		border-top:  $linePx solid $subcolor1;
		margin: 0 auto ;
		top: 40px;  
	}
}
/* DEPARTMENTS COLUMNs */
.departments{ 
	width: 100%;
	display: block;
	clear: both;
	&:before{
		content: "";
		display: block; 
		width: 85%;
		height: 22px;	
		border-top:  $linePx solid $subcolor1;
		border-left:  $linePx solid $subcolor1;
		border-right:  $linePx solid $subcolor1;
		margin: 0 auto ;
		top:  0px; 
	}
}
.department{
	border-left:  $linePx solid $subcolor1;
	width: 13.2%;
	float: left;  
	margin: 0px 4px; 
	&:after{
		content: "";
		position:absolute;
		display: block; 
		width: 10px;
		height: 22px;	
		border-left:  $linePx solid $subcolor1;
		left:50%;
		top:  -22px; 
	}
	&:first-child{
		&:after{
			display:none;
		} 
	}
	&:last-child{
		&:after{
			display:none;
		}
	}
	&.central{
		background:$pageBG;
		&:after{
			display:none;
		}
	}
	span{
		border-left:  1px solid $subcolor1;
	}
	li{	
		padding-left: 25px;
		border-bottom:  $linePx solid $subcolor1;
		height: 80px;
	}
	li span{
		background: $color1;
		top: 38px;	
		position: absolute;
		z-index: 1;
		width: 95%;
		height: auto;
		vertical-align: middle;
		right:0px; 
		line-height: 14px;
		border:  $borderPx solid $subcolor1;
	}
	.sections{
		margin-top: -20px;
	}
}
}

@mixin responsiveClasses() {
	.org-chart{
		.board{
			margin: 0px;
			width:100%;
		}
		.departments{
			&:before{
				border:none;
			}
		}
		.department{
			float: none;
			width: 100%;
			margin-left: 0;
			background:$pageBG;
			margin-bottom: 40px;
			&:before{
				content: "";
				display: block;
				position: absolute;
				width: 15px;
				height: 60px;
				border-left:  $linePx solid $subcolor1;
				z-index: 1;
				top: -45px;
				left: 0%;
				margin-left: -2px;
			}
			&:after{
				display: none;
			}
		}
		.department:first-child:before{	display: none;}
	}
}

/* MEDIA QUERIES */
@media all and (max-width: $screen-sm){
	@include responsiveClasses();
}


/*--------- TO BE REMOVED FROM YOUR CSS --*/
/* this is just to display the behaviour of responsive on codepen */
.responsive-content{
	width: $screen-sm;
	margin:0px auto;
	@include responsiveClasses();

}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js