<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="header-top">
<div class="header-background">
<div class="container">
<div class="row">
<div class="col-10 col-md-6 col-xl-4 bg-dark text-white order-2 order-md-1">
<a class="text-white navbar-brand ua-logo ua-logo-college-as mt-lg-3 mb-lg-4 p-0" href="../index.html" title="The University of Alabama" rel="home">
A&S Logo goes here
<div class="header-triangle"></div>
<div class="header-square bg-white"></div>
</a>
</div>
<div class="col-2 d-md-none align-self-end order-3 bg-light">
<nav class="navbar navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<div class="col-12 col-md-6 col-xl-8 order-1 order-md-2">
<div class="row">
<div class="col-12 col-md-10 bg-danger ">
<div class="bg-danger">
<a class="ua-logo ua-logo-nameplate d-inline-block float-left p-0" href="https://www.ua.edu" title="The University of Alabama" rel="home">
<span class="text-white">The University of Alabama</span>
</a>
<div class="as-breadcrumbs text-uppercase text-white d-none d-xl-block float-left">·/· Arts & Sciences</div>
</div>
</div>
<div class="col-md-2 d-none d-lg-inline">
