html flexbox 2 elements vertical and one on the left

Question

I am totally lost with flexbox for css3, and I cannot seem to figure out how to get it correctly working :(.

I want a layout like:

|-----| |----|
------- |----|
|-----| |----|

(Where |----| on the left are 2 divs an on the right its one)

And on mobile I want the right div to below the other 2 divs... And I cannot seem to figure it out.

It just will not line up correctly, or the 2 divs on the left will not be as large as the one on the right.

I am using bootstrap 4.0 for this... so maybe that is something?

The following code I am currently at:

There is a container div around it

<div id="container">
  <div class="d-flex row">
    <div class="flex-row flex-fill">
      <div class="d-flex flex-column">
        <div class="card d-flex flex-fill">
          <div class="card-body">
            <form>
              <div class="form-group">
                <label>xxx</label>
                <input type="text" class="form-control date" id="birthdatepicker" data-toggle="daterangepicker" data-single-date-picker="true">
              </div>

              <button type="submit" class="btn btn-primary waves-effect waves-light">{{ __('Submit') }}</button>
            </form>
          </div>
        </div>
        <div class="card d-flex flex-fill mb-4 mb-md-0">
          <div class="card-body">
            <h4 class="card-title">{{ __('Progress') }}</h4>
            <div class="progress mb-2">
              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-row col-12 col-md-4 col-lg-2">
      <div class="d-flex flex-fill card mb-4 mb-md-0">
        <div class="card-body">
          <h5>xx</h5>
          <p>
            xx
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Post your code please and take a look [here](https://getbootstrap.com/docs/4.0/layout/grid/) — Simone Rossaini, May 28 '20 at 13:48
I made you a snippet. I added the container. Please change the HTML to **HTML** instead of some framework and ADD CSS, please — mplungjan, May 28 '20 at 13:56

score 0 · Answer 1 · answered May 28 '20 at 13:56

here is a simple example of what i think you wish to achive.

.flexbox{
  display: flex;
  flex-direction: row;
  width: 400px;
  height: 400px;
}
@media only screen and (max-width: 478px){
  .flexbox{
    flex-direction: column;
  }
}
.left{
  width: 50%;
  height: 100%;
}
.top-left{
  height: 50%;
  width: 100%;
  position: relative;
  background: red;
}
.bottom-left{
  height: 50%;
  width: 100%;
  position: relative;
  background: green;
}
.right{
  width:50%;
  height:100%;
}
.center-right{
  width: 100%;
  height: 100%;
  background: blue;
}

<div class="flexbox">
  <div class="left">
    <div class="top-left">
    
    </div>
    <div  class="bottom-left">
    
    </div>
  </div>
  <div class="right">
    <div class="center-right">
    
    </div>
  </div>
</div>

Thanks with your help I got it working! :) – Patrick Rennings May 28 '20 at 14:22 — Patrick Rennings, May 28 '20 at 14:22
glad to hear that :) enjoy coding! – Ramon de Vries May 28 '20 at 14:24 — Ramon de Vries, May 28 '20 at 14:24

html flexbox 2 elements vertical and one on the left

1 Answers1