Bootstrap vertical spacing on mobile-CodePudding

I have a bootstrap breadcrumb element with a page header on the same row which works fine on large monitors but on mobile the header covers the breadcrumb. How do I force the header to a new row for smaller screens?

 <div >
    <div >
        <nav >
            <ol >
                <li >
                    <a href="Default.aspx">Home</a>
                </li>
                <li >This Page</li>
            </ol>
        </nav>
    </div>
   
    <div >
        <asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
    </div>
</div>

CodePudding user response：

You can use Bootstrap's grid system to force the header to a new row on smaller screens. One way to achieve this is to wrap the breadcrumb and the header in separate div elements with the class of row, and then give each div a class of col-lg-* and col-md-* for the larger screens and col-* for smaller screens. For example:

<div >
    <div >
        <div >
            <nav >
                <ol >
                    <li >
                        <a href="Default.aspx">Home</a>
                    </li>
                    <li >This Page</li>
                </ol>
            </nav>
        </div>
    </div>
    <div >
        <div >
            <asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
        </div>
    </div>
</div>

This way on larger screens the breadcrumb and header will be on the same line, but on smaller screens the header will be on a new row, thus avoiding the overlap.