How can I stack sorted columns on mobile without gaps on desktop?

Question

I have a problem regarding the following layouts

    .box1 {
        background: green;
        height: 80px;
    }

    .box2 {
        background: red;
        height: 270px;
    }

    .box3 {
        background: blue;
        height: 200px;
    }

    .box4 {
        background: yellow;
        height: 100px;
    }

Both are correct in some way and wrong in others

Layout 1 stacks the columns in the correct order (box1,2,3,4) on mobile screens, but on desktop screens there are undesired gaps between the content due to different content sizes. This is the current layout I am working with.

Layout 2 does not show the gaps of layout 1, but the columns do not stack correctly (box1,3,2,4).

I understand why both layouts behave the way they do.

How can you create a layout that combines the desired results of both layouts using bootstrap or plain css? (note that the project I am working on uses an older version of bootstrap).

Thanks

Edit

The box heights can vary from page to page. I have just set them in a way that illustrates the problem.

user_11044542 · Answer

It is dirty but I managed it this way:

@media (min-width: 992px){
  .layout-1 .box3{
    margin-top: -190px;
  }
  .layout-1 .box4{
    float:right;
  }
}

I am still searching for something nicer.

DEMO

.box1 {
    background: green;
    height: 80px;
}

.box2 {
    background: red;
    height: 270px;
}

.box3 {
    background: blue;
    height: 200px;
}

.box4 {
    background: yellow;
    height: 100px;
}

/*** ADDED ***/
@media (max-width: 991px){
  .layout-3 .row:first-child{
    display:flex;
    flex-direction: column;
  }

  .layout-3 .box1{order:1;}
  .layout-3 .box2{order:2;}
  .layout-3 .box3{order:3;}

  .layout-3 .box2{
    position: relative;
  }
}
@media (min-width: 992px){
  .layout-1 .box3{
    margin-top: -190px;
  }
  .layout-1 .box4{
    float:right;
  }
  
  
  .layout-3 .row{
    position: relative;
  }
  .layout-3 .box2{
    position: absolute;
    top: 0;
    right: 0;
  }
  .layout-3 .box4{
    float:right;
  }
}

How can I stack sorted columns on mobile without gaps on desktop?

Edit

1 Answers

DEMO