ASP.NET Core 5 MVC中Bootstrap5按屏幕宽度条件渲染头部元素

我正在使用Bootstrap 5开发一个ASP.NET Core 5应用，想要根据屏幕宽度条件渲染头部导航元素。

这是浏览器在较大尺寸（比如笔记本电脑）下的头部样式。
目前所有导航内容都会折叠进Bootstrap汉堡菜单中，我想要实现的效果是：将Hello David、退出登录和购物车信息按钮放在购物车Logo右侧，首页、隐私政策、搜索功能放入汉堡菜单。以下是目前全部折叠后的效果：

我想要实现的效果如下：

现在梳理需求时，我打算去掉独立的退出登录按钮，将退出功能整合到Hello David的下拉菜单中。
要实现该需求，我需要判断屏幕宽度小于某个阈值（也就是Bootstrap触发导航折叠的宽度）的场景。我搜索了很多内容，看到有提到media queries（媒体查询）的方案，但我印象中媒体查询多用于React、Angular这类框架。
请问在ASP.NET Core 5 MVC中该如何实现该需求？我的代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" asp-controller="Products" asp-action="Index"><img src="@(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" 
                                                                                  class="img-fluid" style="max-height:75px;width:auto" alt="备用文本" /></a>

        @*我想要渲染*@

        @*
        <partial name="_Identity.cshtml" /> @*这是Hello David和退出登录按钮
        <ul class="navbar-nav  mb-2 mb-lg-0">
            @await Component.InvokeAsync("ShoppingCartSummary") @*这是购物车按钮
        </ul>
        *@

        @*当屏幕宽度小于X值时展示*@

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" 
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Products" asp-action="Index">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">隐私政策</a>
                </li>

                @if (!User.IsInRole("Seller"))
                {
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="EditProfile">成为卖家</a>
                    </li>
                }

            </ul>

            <form class="d-flex" asp-controller="Products" asp-action="Filter">
                <input name="searchString" class="form-control me-1" type="search" placeholder="搜索商品..." aria-label="搜索">
                <button class="btn btn-outline-success me-2" type="submit">搜索</button>
            </form>

            <partial name="_Identity.cshtml" /> @*这是Hello David和退出登录按钮*@

            <ul class="navbar-nav  mb-2 mb-lg-0">
                @await Component.InvokeAsync("ShoppingCartSummary") @*这是购物车按钮*@
            </ul>
        </div>
    </div>
</nav>

最终解决方案 #

仅在xs、sm、md尺寸屏幕上显示的元素可以添加如下类：

<div class="d-block d-lg-none">

仅在lg及更大尺寸屏幕上显示的元素可以添加如下类：

<div class="d-none d-lg-block">

该方案适用于Bootstrap 5。 #

内容的提问来源于stack exchange，提问作者David.Warwick