Bootstrap Columns Order - html

Question

So I have footer section on the website I'm currently building, and the problem is order of them showing. I want to social icons be above ©
Have a look: footer
html:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
</div> <!-- end of row -->
</div>
css:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
I tried to add class 'order-md-6' to each div with col-md-6, but first of all it didn't work, and secondly it broke layout - it 'pushed' both elements to center. Is it even possible in bootstrap4? I also have a problem centering these items u can see on image I've upload. I'm struggling with this for 2hours and I have no idea how to get this done. I would appreciate any help. Thanks

Answer 1

Bootstrap 4 uses flexbox to position the columns in their rows so you can add the following to your CSS to the control the order of the columns:
.col-md-6:last-child {
order: -1;
}

Answer 2

Not sure if what you provided is the full code sample of your footer or not, but if that's your full html, you're missing a closing tag.
Also, assuming all you want are the icons to go above the copyright line and centered, try this:
#footerbot .socialIcons {
text-align: center;
}
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="socialIcons">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
</div> <!-- end of row -->
</div>
</div>