bootstrap-5

Cannot understand how to get my grid layout working properly with BS5

I am stuck. This is almost what I want but not completely. Below is the currently layout but it needs fixing:

not correct

This is the bootstrap5 html:

<div class="container">
    <div class="row">
        <!-- New Top Section (12 columns wide) -->
        <div class="col-12 order-1">
            <div class="top-section p-3 border">
                <h3>Top Section</h3>
                <p>Content for the top section goes here.</p>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Weather Table -->
        <div class="col-12 col-lg-9 order-2">
            <div class="table-container p-3 border">
                <h3>Weather Table</h3>
                <p>Content for the weather table goes here.</p>
            </div>
        </div>

        <!-- Location Map -->
        <div class="col-12 col-lg-3 order-4 order-lg-3 d-flex flex-column">
            <div id="map" class="p-3 border" style="width: 100%; height: 100%; background-color: #eaeaea;">
                <h3>Location Map</h3>
                <p>Content for the location map goes here.</p>
                
            </div>
        </div>

        <!-- Elevation -->
        <div class="col-12 col-lg-9 order-3">
            <div class="elevation-container p-3 border">
                <h3>Elevation</h3>
                <p>Content for the elevation section goes here.</p>

            </div>
        </div>
    </div>
</div>

What I need is that when Location Map grows vertically, the Elevation section doesn't get shifted down like it is now. I cannot figure out.

Solution

  • I suppose you are looking for something like this:

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <!-- New Top Section (12 columns wide) -->
        <div class="col-12 order-1">
            <div class="top-section p-3 border">
                <h3>Top Section</h3>
                <p>Content for the top section goes here.</p>
            </div>
        </div>
    </div>
    
    <div class="row">
      <div class="col-12 col-lg-9">
        <div class="row">

                <!-- Weather Table -->
                <div class="col-12 order-2">
                  <div class="table-container p-3 border">
                      <h3>Weather Table</h3>
                      <p>Content for the weather table goes here.</p>
                  </div>
              </div>

              <!-- Elevation -->
              <div class="col-12 order-3">
                  <div class="elevation-container p-3 border">
                      <h3>Elevation</h3>
                      <p>Content for the elevation section goes here.</p>

                  </div>
              </div>
        </div>
      </div>

        <!-- Location Map -->
        <div class="col-12 col-lg-3 order-4 order-lg-3 d-flex flex-column">
          <div id="map" class="p-3 border" style="width: 100%; height: 100%; background-color: #eaeaea;">
              <h3>Location Map</h3>
              <p>Content for the location map goes here.</p>
              
          </div>
      </div>
    </div>
</div>

    You can get rows inside cols inside rows and so on to get the good layout.