Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="sticky">
  <div class="item a">A</div>
  <div class="item c">C</div>
</div>
<div class="item b">B</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "susy";
@import "breakpoint";

$susy: (
  columns: 3,
);

.item {
  background: lightgray;
  outline: 1px solid;
}

// small screen
.sticky {
  @include span(1);
}

.a, .c {
  height: 5em;
  margin-bottom: 2em;
}

.b {
  @include span(last 2);
  height: 12em;
}

// large screen
@include susy-breakpoint(40em, 4) {
  .item {
    height: 10em;
  }
  
  .sticky {
    float: none;
    margin: auto;
    width: auto;
  }
  
  .a {
    @include span(1);
  }
  
  .b {
    @include span(2);
  }
  
  .c {
    @include span(last 1);
  }
}

SassMeister-output.css

.item {
  background: lightgray;
  outline: 1px solid;
}

.sticky {
  width: 28.57143%;
  float: left;
  margin-right: 7.14286%;
}

.a, .c {
  height: 5em;
  margin-bottom: 2em;
}

.b {
  width: 64.28571%;
  float: right;
  margin-right: 0;
  height: 12em;
}

@media (min-width: 40em) {
  .item {
    height: 10em;
  }

  .sticky {
    float: none;
    margin: auto;
    width: auto;
  }

  .a {
    width: 21.05263%;
    float: left;
    margin-right: 5.26316%;
  }

  .b {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%;
  }

  .c {
    width: 21.05263%;
    float: right;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="sticky">
  <div class="item a">A</div>
  <div class="item c">C</div>
</div>
<div class="item b">B</div>