Asp.net fixed-top class moves column to different place

See more:

C#

ASP.NET

Here is the layout.

<div class="min-vh-100 d-flex flex-column">

        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom box-shadow">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ASP.NET</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="btn btn-primary" asp-area="" asp-controller="Home" asp-action="Create">
                                    class="fas fa-plus">   Create
                                </a>
                            </li>
                            <li class="nav-item">
                                <form class="form-inline" asp-controller="Search" asp-action="Index">
                                    <input name="query" class="form-control mr-sm-2" type="text" placeholder="Search">
                                    <button class="btn btn-primary" type="submit">Search</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <div class="flex-fill d-flex flex-column">
            <div class="container d-flex flex-column flex-fill">
                <div class="row flex-fill">
                    <div class="col-md-9 bg-light p-1">
                        <main role="main" class="pb-3">
                            @RenderBody()
                        </main>
                    </div>
                    <div class="col-md-3 bg-info p-1 align-content-center">
                        <!-- a bunch of data displayed in foreach -->
                    </div>
                </div>
            </div>
        </div>

        <footer class="border-top footer bg-dark text-light">
            <div class="container">
                © 2021 - ASP.NET - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>

    </div>

Website looks as it should. But I want to make 2nd (right column) fixed-top, so the displayed data will stick in the same place as user scrolls through website.

Solution to that is simple. Just place fixed-top here:

<div class="col-md-3 bg-info p-1 align-content-center fixed-top">
   <!-- a bunch of data displayed in foreach -->
</div>

And it should work. Except I'm here, which means it doesn't. Right column gets magically teleported to left top corner and it stays there all the time, covering most of left column, and basically being in the wrong place.

Any suggestions how to fix it?

What I have tried:

Not much because according to all laws of bootstrap it should make element stick to the top, Googling did not help, no one had this problem before.