CSS responsive floated masonry

by Henry

HTML

<div class="goal">
  <div class="d">d</div>
  <div class="main">
    <div class="a">a</div>
    <div class="c">c</div>
    <div class="b">b</div>
  </div>
</div>

<div class="attemptFlex">
  <div class="b">b</div>
  <div class="a">a</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

<div class="attemptFloat">
  <div class="b">b</div>
  <div class="a">a</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

CSS

.group() {
    *zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.goal {
  .group;
  margin-bottom: 50px;
  div {
    outline: 1px solid blue;
  }
  .d, .main, .a, .c {
    float: left;
  }
  .d {
    width: 25%;
    height: 100px
  }
  .main {
    width: 75%;
    position: relative;
  }
  .a, .c {
    width: 50%;
    height: 50px;
  }
  .b {
    height: 150px;
  }
}

.attemptFlex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  flex-direction: column;
  div {
    outline: 1px solid red;
  }
  .d {
    order: -1;
    width: 25%;
    height: 100px;
    outline: 1px solid green
  }
  .a,
  .c {
    width: calc(~'75%/2');
    float: left;
    height: 20px;
  }
  .b {
    order: 2;
    width: 75%;
    margin-left: 25%;
    float: left;
    height: 150px;
    align-self: stretch;

  }
  @media (max-width: 765px) {
    .a, .b, .c, .d {
      order: 1;
      width: 100%;
    }
    .b {
      margin-left: 0;
    }
  }
}

.attemptFloat {
  position: relative;
  div {
    outline: 1px solid black
  }
  .d {
    width: 25%;
    height: 150px;
  }
  .b {
    width: 75%;
    margin-top: 20px;
    float: right;
    height: 200px;
  }
  .a, .c {
    position: absolute;
    top: 0;
    height: 20px;
    width: calc(~'75%/2');
  }
  .a {
    left: 25%;
  }
  .c {
    right: 0;
  }
  @media (max-width: 765px) {
    .a, .c {
      position: relative;
      top: auto;
    }
    .a {
      left: auto;
    }
    .a,.b,.c, .d {
      width: 100%;
      float: none;
    }
    .b {
      float: none;
      margin-top: 0;
    }
    .c {
      right: auto;
    }
  }
}