标题部分底部的块位置

Question

我有一个header部分，我需要在页面底部安排并使它们响应。这是标题部分的图像： enter image description here

1 block-是观看演示，2 block-用鼠标光标阻止，而3 block-是聊天机器人。请帮助我将它们排列在header的底部。

这是CSS：

.header {
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.4s;
    width: 100%;
    z-index: 99;
    padding: 18px 0;
}
.mainmenu {
    text-align: right;
}
.mainmenu li {
    display: inline-block;
    text-transform: uppercase;
}
.mainmenu li a {
    display: inline-block;
    color: #fff;
    position: relative;
    padding: 5px 16px;
    margin: 0 3px;
    border: 1px solid transparent;
}
.slicknav_menu {
    padding: 0;
    background: transparent;
}
.slicknav_menu a.active,
.mainmenu ul li a:hover,
.mainmenu ul li a.active {
    border: 1px solid #fff;
}
.mainmenu {
    display: block;
}
.slicknav_menu {
    display: none;
}
.header.sticky {
    height: 62px;
    border-bottom: 1px solid #fff;
    background: #000529; /* Old browsers */
    background: -moz-linear-gradient(left, #000529 1%, #002055 24%, #005db5 67%, #0074d9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #000529 1%,#002055 24%,#005db5 67%,#0074d9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #000529 1%,#002055 24%,#005db5 67%,#0074d9 100%);
}
.header.sticky {
    padding: 10px 0;
}
.mainmenu li a.appao-btn {
    margin-left: 55px;
}


#primary-menu li a {
    font-size: 14px;
}

#primary-menu .home {
    text-decoration: none;
    border: 0;
}

#primary-menu .home:hover {
    border: 1px solid #fff;
}

#primary-menu li .writeus {
    font-size: 14px;
}

.writeus img {
    margin-right: 15px;
}

.header-text {
    font-family: 'Righteous', sans-serif;
    color: #fff; 
    text-align: center; 
    font-size: 50px;
}

这是HTML：

<header class="header">
            <div class="container">
                <div class="row flexbox-center">
                    <div class="col-lg-2 col-md-3 col-6">
                        <div class="logo">
                            <a href="#home"><img src="assets/img/logo.png" alt="logo" /></a>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-9 col-6">
                        <div class="responsive-menu"></div>
                        <div class="mainmenu">
                            <ul id="primary-menu">
                                <li><a class="nav-link home" href="#home">Home</a></li>
                                <li><a class="nav-link" href="#services">Services</a></li>
                                <li><a class="nav-link" href="#about">About</a></li>
                                <li><a class="nav-link" href="#business">Business</a></li>
                                <li><a class="nav-link" href="#insight">Insight</a></li>
                                <li><a class="nav-link" href="#contacts">Contacts</a></li>
                                <li><a class="appao-btn writeus" href="#"><img src="assets/img/icons/icon5.svg">writeus</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="hr">
        </header>