CSS Remove white gaps above floated elements

Question

I am trying to build this layout:

I used float: left for the boxes in the left side and float: right for the ones in the right.

The problem is that every right-floated box is aligning it's top with the the previous left-floated element.

Thus all I get is this:

HTML:
I need to keep the elements in this order (box1, box2, ... box7)

<div class="container">
  <div class="box box1 left green">
    BOX 1 (big) Lorem ipsum (...)
  </div>
  <div class="box box2 right orange">
    BOX 2 (small) 
  </div>
  <div class="box box3 right blue">
    BOX 3 (small) 
  </div>
  <div class="box box4 left pink">
    BOX 4 (big) Lorem ipsum (...)
  </div>
  <div class="box box5 right yellow">
    BOX 5 (small)
  </div>
  <div class="box box6 left teal">
    BOX 6 (big) Lorem ipsum (...)
  </div>
  <div class="box box7 right purple">
    BOX 7 (small)
  </div>
</div>

DEMO: https://codepen.io/constagorgan/pen/vjLJzG

Other considerations:

• On smaller devices the boxes should be merged in a single column, same as using col-*-12 in Bootstrap, but keeping same ordering (box1, box2, ... box7)
• I can use Bootstrap, Masonry, Bulma or other library that helps building grids / layouts as long as it's supported by IE11, Chrome and Firefox
• A CSS-only solution would be absolutely fantastic.
• I don't want to use display: table. Reasons for this are given here.

What I've tried so far:

• Using Bootstrap → I cannot make it responsive for small screens without moving things around inside the DOM.
• Using Masonry → I couldn't find a way to order the boxes. They are just positioning themselves in the closest available place.
• Using flex → I got stuck in a similar situation.
• Using CSS grid layout → It's not fully supported on IE11.
• Using CSS columns → I need a 70%|30% ratio. This is designed for 50%|50%.

How can I remove those white gaps from the layout? Can I achieve this with floated elements? If not, what's the proper way to do it?

EDIT: I need to make it responsive. On smaller screen I need to stick with this one-column layout (as I mentioned in the "Other considerations" section.

Answer 1

If you combine Flexbox and float, you can do like this, where on narrower screens make use of the Flexbox property order.

By initially add the smaller elements first, you can simply float and clear them and they will align right, in a column of their own.

When the media query kicks in, remove float, add display: flex and order them 1-7.

Updated codepen

Stack snippet

.left {
  width: 75%;
}
.right {
  float: right;
  width: 25%;
  clear: right
}

.green { background-color: #90EE90; }
.blue { background-color: #20B2AA; }
.orange { background-color: #FFA07A; }
.pink { background-color: #FFB6C1; }
.yellow { background-color: #FFD700; }
.teal { background-color: #00CED1; }
.purple { background-color: #9370DB; }

@media (max-width: 500px) {
  .left, .right {
    float: none;
    width: 100%;
  }
  .container {
    display: flex;
    flex-direction: column;
  }

  .container .box1 { order: 1 }
  .container .box2 { order: 2 }
  .container .box3 { order: 3 }
  .container .box4 { order: 4 }
  .container .box5 { order: 5 }
  .container .box6 { order: 6 }
  .container .box7 { order: 7 }
}

<div class="container">
  
  <div class="box box2 right orange">
  BOX 2 (small) 
  </div>
  
  <div class="box box3 right blue">
  BOX 3 (small) 
  </div>

  <div class="box box5 right yellow">
  BOX 5 (small)
  </div>

  <div class="box box7 right purple">
  BOX 7 (small)
  </div>

  <div class="box box1 left green">
  BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
  </div>

  <div class="box box4 left pink">
  BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. 
  </div>

  <div class="box box6 left teal">
  BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
  </div>

</div>

---

If you can't change markup, you need script, where you either hook up on the resize event, or as here, the window.matchMedia event.

Stack snippet

document.addEventListener("DOMContentLoaded", function(event) {

  var container = document.querySelector('.container');
  var items = document.querySelectorAll('.container .box');

  var reorderitems = function(matched) {
    if (matched) {
      container.appendChild(items[0]);
      container.appendChild(items[3]);
      container.appendChild(items[5]);
    } else {
      container.insertBefore(items[2], items[3]);
      container.insertBefore(items[1], items[2]);
      container.insertBefore(items[4], items[5]);
      container.appendChild(items[6]);
    }
  }
  reorderitems(window.outerWidth > 500);

  window.matchMedia("(min-width: 501px)").addListener(function(e) {
    if (e.matches) {
      reorderitems(true);
    } else {
      reorderitems(false);
    }
  });
});

.left {
  width: 75%;
}

.right {
  float: right;
  width: 25%;
  clear: right
}

.green {
  background-color: #90EE90;
}

.blue {
  background-color: #20B2AA;
}

.orange {
  background-color: #FFA07A;
}

.pink {
  background-color: #FFB6C1;
}

.yellow {
  background-color: #FFD700;
}

.teal {
  background-color: #00CED1;
}

.purple {
  background-color: #9370DB;
}

@media (max-width: 500px) {
  .left,
  .right {
    float: none;
    width: 100%;
  }
}

<div class="container">

  <div class="box box1 left green">
    BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
    in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
  </div>

  <div class="box box2 right orange">
    BOX 2 (small)
  </div>

  <div class="box box3 right blue">
    BOX 3 (small)
  </div>

  <div class="box box4 left pink">
    BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
    in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
  </div>

  <div class="box box5 right yellow">
    BOX 5 (small)
  </div>

  <div class="box box6 left teal">
    BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
    in, efficitur pulvinar ipsum.
  </div>

  <div class="box box7 right purple">
    BOX 7 (small)
  </div>

</div>