Позиционирование 3 Bootstrap Jumbotrons на веб-странице

Это часть кода моей страницы входа...

<div class = "container-fluid align-content-center"   >

                    <div class = "col-md-12">

*This is the 1st jumbotron for displaying the client logo*
                        <div class = "jumbotron align-content-right col-4 float-right" style = "background-color:White">
                      <div class = "form-group align-content-center">
<%--                        <div style = "float:none">--%>


                                                                          <asp:Image ID = "imglogo" runat = "server"  />
       <%--                 </div>--%>
                    </div>   
                        </div>

*This is the 2nd jumbotron for displaying the product logo and holds text fields for entering login credentials*
             <div class = "jumbotron align-content-left col-5 " style = "background-color:White; border: 5px; border-color:red">

                     <div class = "form-group">

                                            <asp:Image ID = "imgcubelogo" runat = "server"  ImageUrl = "~/IMAGES/erp big.jpg" />
                    </div>


                                <div class = "form-group">
                                    <asp:Label ID = "lblCompany" runat = "server" Text = "Company Name" class = "form-control"></asp:Label>
                                </div>
                                <div class = "form-group">
                                    <asp:DropDownList ID = "cboCompany" runat = "server" class = "form-control" AutoPostBack = "True" OnSelectedIndexChanged = "cboCompany_SelectedIndexChanged"></asp:DropDownList>
                                </div>
                                <div class = "form-group">
                                    <asp:Label ID = "Label2" runat = "server" Text = "Financial Year" class = "form-control"> </asp:Label>
                                </div>
                                <div class = "form-group">
                                    <asp:DropDownList ID = "ddlfinalcialyear" runat = "server" class = "form-control"></asp:DropDownList>
                                </div>
                                <div class = "form-group">
                                    <asp:TextBox ID = "TxtUsername" runat = "server" TextMode = "singleline" class = "form-control" placeholder = "Enter Username" TabIndex = "1"></asp:TextBox>
                                </div>
                                <div class = "form-group">
                                    <asp:TextBox ID = "TxtPassword" runat = "server" TextMode = "Password" class = "form-control" placeholder = "Enter Password" TabIndex = "2"></asp:TextBox>
                                </div>
                                <div class = "form-group">
                                    <asp:Button ID = "btnlogin" runat = "server" Text = "Login" class = "form-control" TabIndex = "3" />
                                </div>
                                <div class = "form-group">
                                    <asp:LinkButton ID = "LinkButton2" runat = "server" OnClick = "LinkButton1_Click" Font-Size = "Medium" Style = "margin-right: 30px;" TabIndex = "4">Change Password</asp:LinkButton>
                                </div>
                                <div class = "form-group">
                                    <asp:Label ID = "lblMessage" runat = "server" ForeColor = "#FF8080" Text = ":" Visible = "False"></asp:Label>
                                    </div>


                        </div>

*This is the 3rd jumbotron for displaying the company logo*
                 <div class = "jumbotron align-content-right col-4 float-right" style = "background-color:White; border: 25px; border-color:red">
                                <div class = "form-group align-content-right">

                                                                        <asp:Image ID = "Image2" runat = "server"  ImageUrl = "~/IMAGES/eshabu.jpg" />       
                    </div>


                                               </div>
                    </div>

Показаны текущие позиции этих джамботронов на веб-странице; Это верхняя половина страницы, где вы можете увидеть jumbotrons 1 и 2. и это нижняя половина страницы, где вы также можете увидеть 3-й джамботрон.

Как видите, 3-й джамботрон появляется только внизу страницы и его можно увидеть только после прокрутки вниз. Я хочу, чтобы он появился немного ниже 1-го джамботрона, на той же линии. Таким образом, я смогу одновременно увидеть содержимое всех трех джамботронов. Я работаю над этим уже несколько дней; до сих пор не нашел решения. Пожалуйста помоги.

(У меня действительно нет большого опыта в программировании. Я все еще учусь.)

Веб-страница после предложенного редактирования