Bootstrap - łączenie kolumny w dwóch rzędach

Question

Cześć,

chciałbym uzyskać taki layout w bootstrapie:

Znalazłem taką metodę:

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 1</div>
                </div>
            </div>
            <!--Nested rows-->
            <div class="row">
                <div class="col-12">
                    <div class="sidebarContent">Side Bar 2</div>
                </div>
            </div>
        </div>
        <div class="col-9">
            <div class="mainContent">Main Content Area</div>
        </div>
    </div>
</div>

Czy istnieje możliwość zastosowania takiej metody (czy to jest nesting w bootstrapie?) w moim przypadku, czy pozostaje użyć klasy order? 

Dzięki za odpowiedź, pozdrawiam.

 

Comments

Nie prościej gridem w ten sposób?
 

#container{
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template:             
          "a mid c"            
          "b mid d" ;
}
.blue{
   background-color: blue;
   grid-area: a; 
}
.red{
   background-color: red;
   grid-area: mid; 
}
.yellow{
   background-color: yellow;
   grid-area: b; 
}
.green{
   background-color: lime;
   grid-area: c; 
}
.black{
   background-color: black;
   grid-area: d; 
}

 

---

Tak wiem, ale uczę się obecnie bootstrapa i w projekcie natrafiłem na taki problem, więc jestem ciekawy czy można go rozwiązać samym bootstrapem ;)

Answer 1

Może najpierw ...

 

podziel na 3 kolumny

<div class="container-fluid g-0">
  <div class="row g-0">
  
    <div class="col">
        <!-- Side Bar 1   Side Bar 2 -->
    </div>
    
    <div class="col">
        <!-- Main Content Area -->
    </div>
    
    <div class="col">
        <!-- Side Bar 3   Side Bar 4 -->
    </div>
    
  </div>
</div>

a potem w pierwszej i ostatniej kolumnie dodaj

      <div class="row g-0">
        <div class="sidebarContent">Side Bar x</div>
      </div>
      <div class="row g-0">
        <div class="sidebarContent">Side Bar y</div>
      </div> 

 

całość: on-line  (Bootstrap 5.x)

Comments

Dziękuję bardzo :)

---

czemu nie kliknąć, że rozwiązane?