Align favicons responsively inside navbar - html

Question

I have a certain navbar as shown in the figure 2 . I want them to be in figure 1 when i minimize the browser .ie i need a responsive design.
The code i have tried is...
https://codepen.io/poornam/pen/dyGMmdp
<nav class="navbar-custom navbar navbar-expand-sm ">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class=" navbar-brand nav-link" href="#">balakrsihnan#gmail.com</a>
</li>
<li class="nav-item">
<a class=" navbar-brand nav-link" href="#">[phone]</a>
</li>
</ul>
<div>
</div>
</nav>
figure 1
figure 2

Answer 1

This answer presumes that you are looking for a solution that utilizes Bootstrap 4.x though neither the code presented here or on your Codepen example clarify if you're using the most recent version or an older. With that being said:
By default the Navbar component is going to try to organize everything horizontally. Breaking out of this behavior is fairly straightforward using Bootstrap's various utility classes. In the example below d-flex does all the heavy lifting.
.navbar.navbar-custom {
background: #000;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text,
.navbar-custom .active {
color: #fff;
}
.navbar.navbar-custom .active {
display: inline-flex;
background: #ff0000;
border-radius: 50%;
margin: 0.125rem;
font-size: 1.5rem;
padding: 0.75rem 0.625rem;
text-decoration: none;
}
<nav class="navbar navbar-custom">
<div class="d-flex mr-sm-auto py-2">
<span class="fa fa-envelope fa-fw mr-1"></span>balakrsihnan#gmail.com
<span class="fa fa-phone fa-fw mr-1"></span>[phone]
</div>
<div class="d-flex ml-sm-auto">
<span class="fab fa-fw fa-facebook"></span>
<span class="fab fa-fw fa-twitter"></span>
<span class="fab fa-fw fa-google"></span>
<span class="fab fa-fw fa-linkedin"></span>
<span class="fab fa-fw fa-youtube"></span>
<span class="fab fa-fw fa-instagram"></span>
<span class="fab fa-fw fa-pinterest"></span>
</div>
</nav>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
Your duplicate use of .navbar-brand seemed unnecessary to me and counter-intuitive to that classes purpose. I've wrapped your two hyperlinks in <div lass="d-flex mr-sm-auto py-2">...</div> which does the following:
Ensures the child elements will behave like flex children.
Makes sure on 'Small' breakpoint screens (and above) that we're pushing this to the left
Applies a top/bottom padding (PY-2)
A similar behavior is applied to the <div> that was housing your social media links. Applying flex behavior here lets everything get organized nicely. And we can ensure that this element aligns to the right of the screen using ml-sm-auto.
The format of the social media icons has also been updated to provide you more granular control of the shape / output. <font awesome icon>.