How to make uneven columns in bootstrap?

Question

Bootstrap

Here's how to place the entries in the prntscr.com/bmsrf2 columns .
Is it possible to do this in bootstrap? And if so, how?
Or maybe you know how such a structure of records is called?

Answer 1

Everything, I understood how, I'm just stupid.
You just need to do this:

<div class="row show-grid"> 
<div class="col-sm-6"> Level 1: .col-sm-9 <div class="row show-grid">  
<div class="col-xs-4 col-sm-12" style="
    height: 100px;
"> Level 2: .col-xs-4 .col-sm-6 </div><div class="col-xs-4 col-sm-12" style="
    height: 30px;
"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div><div class="col-sm-6"> Level 1: .col-sm-9 <div class="row show-grid">  
<div class="col-xs-4 col-sm-12"> Level 2: .col-xs-4 .col-sm-6 </div>
<div class="col-xs-4 col-sm-12" style="
    height: 200px;
"> Level 2: .col-xs-4 .col-sm-6 </div><div class="col-xs-4 col-sm-12"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>

Answer 2

ratio?
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="calci c-3- 2">
<iframe src=" https://player.vimeo.com/video/141049060 " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="col- md-4">
<div class="calci c-16-9">
<iframe src=" https://player.vimeo.com/video/141049060 " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<
https://player.vimeo.com/video/141049060 "frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
For dialog:
CalcI - BootstrapTema
Repository:
https://github.com/BootstrapTema/calci