I have a question about CSS. I have a simple footer with col-md-8 and col-md-4 classes. How can I arrange the col-md-8 above the col-md-4 at the media breakpoint of 720px (max)? I am new to CSS and would appreciate your help with this. Please run the snippet below to see the code.
/* <================== Footer ================> */
/*--- Footer Copyright ---*/
footer {
background-color: #5A5A5A;
color: #ffffff;
padding: 10px;
}
footer .col-md-8 ul {
list-style: none;
display: inline-flex;
}
footer .col-md-8 ul>li {
padding-left: 20px;
}
footer .col-md-8 ul>li>a {
color: #ffffff;
}
@media only screen and (max-width: 720px) {
}<!-- <======================== Footer ======================> -->
<footer class="mt-3">
<div class="row">
<div class="col-md-4">
<!-- Footer Copyright -->
<p class="ml-4 mb-0">Copyright <i class="fa fa-copyright"></i> 2020 Swan. All Rights Reserved.</p>
</div>
<div class="col-md-8 pull-right">
<!-- Footer Navigation -->
<ul class="mr-4 mb-0">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Private Policy</a></li>
</ul>
</div>
</div>
</footer>