<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="content">
<h1>Responsive Organization Chart</h1>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a href="#"><span>Director</span></a>
<ul class="subdirector">
<li><a href="#"><span>Assistante Director</span></a></li>
</ul>
<ul class="departments cf">
<li><a href="#"><span>Administration</span></a></li>
<li class="department dep-a">
<a href="#"><span>Department A</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section A1</span></a></li>
<li class="section"><a href="#"><span>Section A2</span></a></li>
<li class="section"><a href="#"><span>Section A3</span></a></li>
<li class="section"><a href="#"><span>Section A4</span></a></li>
<li class="section"><a href="#"><span>Section A5</span></a></li>
</ul>
</li>
<li class="department dep-b">
<a href="#"><span>Department B</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section B1</span></a></li>
<li class="section"><a href="#"><span>Section B2</span></a></li>
<li class="section"><a href="#"><span>Section B3</span></a></li>
<li class="section"><a href="#"><span>Section B4</span></a></li>
</ul>
