theming – Reorganizing Regions in Bootstrap 4 Theme

A disclaimer first: I am a professional medievalist, not a programmer or a front-ender. I have some front-end knowledge, but not a lot. So, please, be easy on me.

Now, I am customizing a Bootstrap 4 subtheme and there is a particular layout that I need to achieve that I, for the life of me, cannot get to work. Thus, I turn to you, good and kind people of stack exchange, for aid, counsel and favor.

I am attaching the pictures and the code. The first picture is the original Bootstrap 4 region layout. The picture 2 is the region layout that I need.

Vanilla Bootstrap 4

The second picture is what I need it to be. Basically, the body of the page should be container-fluid, but the content inside the body should be just container. In that way, the sidebar first and sidebar second would be all the way on the margins. I have read a lot of contradictory advice on nesting a container inside the container-fluid, but whatever I try, it simply does not produce the desired effect.

What I need

Here is the Twig file:

    <main role="main">
  <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

  {% 
  set sidebar_first_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set sidebar_second_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set content_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-lg-6' : ((page.sidebar_first or page.sidebar_second) ? 'col-12 col-lg-9' : 'col-12' )
   %}


  <div class="{{ b4_top_container }}">
    {% if page.breadcrumb %}
      {{ page.breadcrumb }}
    {% endif %}
    <div class="row no-gutters">
      {% if page.sidebar_first %}
        <div class="order-2 order-lg-1 {{ sidebar_first_classes }}">
          {{ page.sidebar_first }}
        </div>
      {% endif %}
      <div class="order-1 order-lg-2 {{ content_classes }}">
        {{ page.content }}
      </div>
      {% if page.sidebar_second %}
        <div class="order-3 {{ sidebar_second_classes }}">
          {{ page.sidebar_second }}
        </div>
      {% endif %}
    </div>
  </div>

</main>

Also, I have no clue what the b4_top_container does; could not find the explanation anywhere.

Any help would be massively appreciated.

Thank you all very much in advance.