Przypięcie elementu w miejscu

Mam aplikację jak poniżej (.NET Core + jQuery + Bootstrap). Po lewej stronie od zaznaczonego elementu wyświetla się dosyć długa lista modemów do wyboru w formie tabelki. Chciałbym uzyskać efekt, gdzie mogę scrollować tą listę, ale pole szukaj, pole komunikatów błędów oraz zaznaczony fragment pozostają w miejscu. Podpowiedzcie proszę w jaki sposób uzyskać taki efekt, żeby to jednocześnie pozostawało responsywne i działało na telefonach?

Poczytaj o position: sticky; (https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46)

Ok, podoba mi się, ale jak to ugryźć jeżeli mam strukturę jak poniżej i chcę żeby divy A, B oraz D stały w miejscu, a przesuwał się tylko C?

<div class="container body-container">
    <div class="row sticky-top-50">
        <div id="A" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 order-first">

        </div>
        <div id="B" class="col-lg-6 col-xl-6">

        </div>
    </div>
    <div  class="row sticky-top-80">
        <div id="C" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 order-first">

        </div>
        <div id="D" class="col-lg-6 col-xl-6 sticky-top-80">

        </div>
    </div>
</div>

Ogólnie to zamysł position: sticky jest taki, że żaden wczesniejezy element w drzewie DOM nie może być relative / absolute / sticky / fixed, oraz wysokość rodzica (element wyżej niż div z #c) powinna być większa od jego dziecka (czyli nasz div #c).

Nie wiem, czy rozumiesz moją "definicje" :D

baroo napisał(a):

Ok, podoba mi się, ale jak to ugryźć jeżeli mam strukturę jak poniżej i chcę żeby divy A, B oraz D stały w miejscu, a przesuwał się tylko C?

<div style="display: flex">
  <div style="height: 1000px">
    Tekst na 1000 pikseli wysokości
  </div>

  <div>
    Tutaj wysokość będzie taka sama przez flexboxa
    
    <div id="c" style="position: sticky; top: 25px;">
       Sticky div :)
    </div>
  </div>
</div>

Wszystkie nieruchome treści wkładasz do lewej kolumny, a rzeczy, które mają być sticky do prawej.

edit:
Nie wiem z której wersji Bootstrapa korzystasz, ale w wersji 4, o ile się nie mylę to wszystkie klasy col-x i pochodne były standardowo oznaczone jako position: relative, więc trzeba zmienić je na position: static, żeby wszystko nam działało.