How can I make a Bootstrap div to cover multiple rows?

August 12, 2022

I’m trying to figure out how to do the following grid with Bootstrap.
i would like to know if it is possible in first place to create this type of grid.

doing horizontal divs such as 1,2 ,4, 5 ,7 is udnerstandable, but what about div 3&6 that cover multiple rows.

i used:

 <div class="col-sm-4 col-md-4">4</div>
 <div class="col-sm-4 col-md-4">5</div>
 <div class="col-sm-4 col-md-8">6</div>

to create 4 5 6 part but what i get looks like this:

>Solution :

A very rough idea of how you might do it:

<div class="container">
   <div class="row">
     <div class="col-9 row">
       <div class="col-6 box">1</div>
       <div class="col-6 box">2</div>
       <div class="col-4 row">
         <div class="col-12 box">4</div>
         <div class="col-12 box">5</div>
       </div>
       <div class="col-8 row">
         <div class="col-12 box">6</div>
       </div>
       <div class="col-12 box">7</div>
     </div>
     <div class="col-3 row">
       <div class="box">3</div>
     </div>
   </div>
 </div>

You basically have to just draw rectangles around your groups and that is how they end up being ordered. e.g. first you draw a rectangle around everything but 3 and 3, those are your first columns. Then rectangle around 1 and 2 then 4, 5 and 6 and finally 7 etc.