Footer issue - for social media Icon

HTML & CSS
,
1

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;}
2

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.

3

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