<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <div class="container"> <div class="top1 row"> <div class="col-12 col-sm-6 col-md-6 text-center text-sm-left"> sss </div> <div class="col-12 col-sm-6 col-md-6 text-center text-sm-right"> <ul class="list-inline"> <li class="list-inline-item col-sm-4 text-center text-sm-left"> <div class="media"> <i class="align-self-top mt-1 mr-2 fa fa-phone text-right" ></i> <div class="media-body"> <a href="#" class=" "> 123-456-789 </a> <a href="#" class=" ">111-123-456</a> </div> </div> </li> <li class="list-inline-item col-sm-2"> <div class="media"> <i class="align-self-center mr-3 fa fa-envelope" ></i> <div class="media-body pt-0 mt-0 "> <a href="#" class="pt-0 mt-0 "> loriumepsum@gmail.com </a> </div> </div> </li> </ul> </div> </div> </div>