How to make the bootstrap grid change not based on the width of the screen, but on the container in which it is located?

Question

css

The bottom line is that I'm making a visual html page editor.
The screen is always 1920 wide. In the toolbar there is a switch between the page view xs, sm, md, lg, xl.
All my blocks are inside a div:

<div class="pagewidth">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-5 col-md-3 col-lg-2 col-xl-1">Закрываем все потребности в разработке баннеров. Четко и в срок разработаемнеобходимый комплект баннеров по ТТ с гарантией качества.Если вам не понравится - вернем деньги.</div>
      <div class="col-xs-5 col-sm-2 col-md-2 col-lg-2 col-xl-2">фыва</div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">фыв фыв3</div>
      <div class="col-xs-2 col-sm-7 col-md-2 col-lg-2 col-xl-2">Привет</div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-8 col-xl-2">Привет</div>
    </div>
  </div>
</div>

By changing the .pagewidth width, the columns should be rebuilt according to the expansion according to the width of this block,
but bootstrap says:
media (min-width: 768px) {...}
media (min-width: 992px) {...}
media (min-width : 1200px) {...}
....
Accordingly, they are rebuilt according to the screen width.
How to make blocks take up the number of columns according to the width of the parent block, and not the width of the screen?

Answer 1

The bootstrap grid divides the screen into 12 cells, this is the base. The maximum you can do is divide each cell also by 12, and so on. If you want to replace the basics - write them yourself :)

Answer 2

So change the width of .container however you want. tamzh columns are considered percentage
https://codepen.io/kickerock-the-decoder/pen/WLPmLV

Answer 3

There are also breakpoints, just redefine them for elements that are children of your editor.
https://getbootstrap.com/docs/4.0/layout/grid/#gri...