How to change bootstrap layout elements on smaller resolution? - html

Question

I want to change bootstrap layout elements in different positions when in mobile resolutions like (max-width: 768px) and smaller.
This photo shows what i need to do exactly:
EXAMPLE
How and what i need to change to achieve that positions?
My code: jsfiddle
HTML
<!-- FOOTER-->
<section id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-col">
<p><a class="contacts" href="#">CONTACTS</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>STUART LAWSON</h2>
<p>20 7409 8920</p>
<p>07870 555 930</p>
<p><a class="email" href="#">slawson#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>JOSH LAMB</h2>
<p>020 7409 8891</p>
<p>07976 988 486</p>
<p><a class="email" href="#">jlamb#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>SAM BOREHAM</h2>
<p>020 7710 7963</p>
<p>07917 635 465</p>
<p><a class="email" href="#">samb#gmreal.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>DAN ROBERTS</h2>
<p>020 7710 7963</p>
<p>07801 143 909</p>
<p><a class="email" href="#">danr#gmreal.com</a></p>
</div>
<div class="col-md-2 right-col">
<h2><a class="info" href="#">info#theriverbuilding.com</a></h2>
</div>
</div>
</div>
</section> <!-- END END FOOTER -->
CSS
/*** FOOTER ***/
.col-md-2 {
width: 16.66666666666667%;
float: left;
bottom: -67px;
}
.contacts {
position: absolute;
top: 110px;
left: 118px;
}
.col-md-2.contact-person {
color: #4cae4c;
}
#footer {
padding: 0 10px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.left-col {
padding: 110px;
margin-left: -50px;
bottom: -65px;
}
.right-col {
padding: 86px;
position: absolute;
right: 76px;
bottom: -40px;
}
#footer p, #footer .email, #footer .contacts, #footer h2, #footer .info{
font-family: 'GothamBook', sans-serif;
color: #ffffff;
font-size: 1.063em; /*13pt in psd*/
opacity: 1.0;
}
#footer .info {
font-size: 1.3em; /*15pt in psd*/
position: absolute;
top: 95px;
right: -28px;
}
.row {
margin-left: -10px;
margin-right: -10px;
}
.row:before, .row:after{
content: " ";
display: table;
}
.row:after{
clear: both;
}
/***MEDIA QUERIES***/
#media(max-width: 768px){
.container-fluid {
width: 550px;
}
#header .logo img{
margin: 15px 0 20px;
height: 120px;
}
h1{
font-family: 'GothamMedium', sans-serif;
position: absolute;
text-align: center;
font-size: 1.55em; /*19pt in psd*/
margin: 100px 215px;
}
#footer .contacts {
left: 25px;
top: 95px;
}
.col-md-2.contact-person {
left: -110px;
top: 65px;
margin-left: 14px;
}
#footer{
text-align: center;
}
.info{
padding-top: 50px;
font-size: 9px;
text-align: center;
}
.left-col {
text-align: center;
margin-left: 0;
margin-right: 0;
padding: 100px;
font-size: 12px;
}
}

Answer 1

Use 2 different rows instead of 1 to stack the elements.
<section id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-col">
<p><a class="contacts" href="#">CONTACTS</a></p>
</div>
</div>
<div class="row">
<div class="col-md-2 contact-person">
<h2>STUART LAWSON</h2>
<p>20 7409 8920</p>
<p>07870 555 930</p>
<p><a class="email" href="#">slawson#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>JOSH LAMB</h2>
<p>020 7409 8891</p>
<p>07976 988 486</p>
<p><a class="email" href="#">jlamb#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>SAM BOREHAM</h2>
<p>020 7710 7963</p>
<p>07917 635 465</p>
<p><a class="email" href="#">samb#gmreal.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>DAN ROBERTS</h2>
<p>020 7710 7963</p>
<p>07801 143 909</p>
<p><a class="email" href="#">danr#gmreal.com</a></p>
</div>
<div class="col-md-2 right-col">
<h2><a class="info" href="#">info#theriverbuilding.com</a></h2>
</div>
</div>
</div>
</section> <!-- END END FOOTER -->