Footer issue - for social media Icon

I want to show Social Media icon first in Tab/Mobile view but in my case the ul li list coming 1st,

please suggest how I can show my Social media Icon above, your early reply appreciated…

<footer>
	<div class="container pa0">
		<div class="col-lg-6 pa0 pull-left">
			<ul>
				<li><a href="#!">abc</a></li>
				<li><a href="#!">xyz</a></li>
				<li><a href="#!">abv1 <i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
			</ul>
		</div>
		<div class="col-lg-6 pa0" style="border:0px solid #fff">
            <ul class="social-icon pull-right">
				<a href="#" class="social"><i class="fa fa-facebook" aria-hidden="true"></i></a>
				<a href="#" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a>
				<a href="#" class="social"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
            </ul>
		</div>
	</div>
</footer>
footer {
	padding:20px;
	background-color:#6402aa;
}

footer ul{
    list-style:none;
    margin:0px;
	padding:0px;
    display:inline-block;
}

footer ul li{
    float:left;
}

footer ul li a:first-child{
    margin-left:-20px;
	border:0px solid #fff;
}

footer ul li a{
	color:#fff;
    padding:10px 20px;
	display:block;
	font-size:16px;
}

footer ul li a:hover{
	color:#fff;
	text-decoration:none;
}

footer .social-icon{padding:0px;margin:0px;}
footer .social-icon a{display:inline-block;color:#fff;font-size:25px; padding:5px 15px;}
footer .acount-icon a{display:block;color:#fff;font-size:18px;padding:5px; text-decoration:none;}
footer .acount-icon .fa{margin-right:25px;}

You could use flexbox for the smaller view and that will allow you to reorder the content so that the social icons come first.

As a rough guide do something like this:

@media screen and (max-width:678px) {
	.swap{display:flex;flex-wrap:wrap;}
	.swap > * {flex:1 0 100%}
	.social-icon{float:none!important}
	.swap .pa0 + .pa0{order:-1}
}

I added a class to .container called .swap.

<footer>
	<div class="container pa0 swap">
		<div class="col-lg-6 pa0 pull-left">
			<ul>

Obviously adjust the width of the media query to suit and then style the elements as you wanted but the order should now be correct.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.