Make Header Responsive using CSS

Hi sir,

I have header I want to make it responsive by mobile screen.

I want to adjust it like,

Datelabel  Flightlabel   Stationlabel    On left side

Than logo at centre

And then all other label at right side with adjustable.

I want output like.

Flightlabel  stationlabel           Logo          namelabel  palabel

Datelabel                                                        deptlabel

Homebutton                                                    Signout button

My html and css is below

<header class="header-section">
    <div class="header-top">
        <div class="container">
            <div class="ht-left">
                <div class="mail-service">
                     <div class="logo">                              
                            <img src="img/aairblue.png" alt=""/>
                    </div></div>                          
                <div class="phone-service">
                    <i class=" fa fa-phone">                      
                                <asp:Label ID="nameLabel" runat="server" Text="Label"></asp:Label>
                      <br />
                     pa-<asp:Label ID="paLabel" runat="server" Text="Label"></asp:Label>
                     <br />                          
                               <asp:Label ID="stationLabel" runat="server" Text="Label"></asp:Label>
                     <br />                          
                    <asp:Label ID="deptLabel" runat="server" Text="Label"></asp:Label>
                     <br />
                     <br />
                    <asp:Button ID="Button1" runat="server" Text="Sign Out" OnClick="Button3_Click" CssClass="btn" />
                     </i>                          
                </div>                      
                                <asp:Label ID="dateLabel" runat="server" Text="Label"></asp:Label>
                     <br />
                                 <asp:Label ID="flightLabel" runat="server" Text="Label" CssClass="a"></asp:Label>
                        <br />
                <asp:Button ID="Button2" runat="server" Text="Home" OnClick="Button2_Click1" CssClass="btn"/>
                 <br />             
            </div>
        </div>
    </div>
</header>

.header-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
}
 
.header-top .ht-left .phone-service {
    float: right;
}
 
.header-top .ht-left .mail-service {
    font-size: 20px;
    font-weight: bold;
    color: #252525;
    float: left;
    border-right: 1px solid #E5E5E5;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
}
 
    .header-top .ht-left .mail-service .logo {
        padding: 10px 0;
        height: 50px;
        width: 60px;
        float: left;
    }
 
 
    .header-top .ht-left .mail-service .logo {
        display: inline;
    }
 
        .header-top .ht-left .mail-service .logo img {
            padding: 8px 0;
            height: 50px;
            width: 70px;
            float: left;
        }
 
    .header-top .ht-left .mail-service i {
        margin-right: 5px;
    }
 
.header-top .ht-left .phone-service {
    float: right;
    font-size: 15px;
    color: #252525;
    line-height: 15px;
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 20px;
    display: flex;
}
 
    .header-top .ht-left .phone-service i {
        margin-right: 5px;
    }
 
.header-top .ht-right {
    float: left;
}