Susy Next content source ordered layout

I'm having a few issues understanding how to produce the following layout using Susy Next.

While this is pretty strait forward with strait CSS I can't seem to get my head around doing this cleanly in Susy, or at all really.

A caveat here is that I can't add any extra wrappers into the layout, it's just four DIV blocks and has to be that way. The other caveat is that I would really prefer to be using Susy Next (I am using alpha4 at the moment).

Really kind of hoping I am just not seeing the woods for the tress as I have only been using Susy for a few weeks.

The source order is:

first
second
third
fourth

The required layout is:

    -----------------------------------------
   |  fourth    |           first            |
   |             ----------------------------
   |            |    second   |     third    |
    -----------------------------------------

Update 1.

Update to add my current CSS solution, I've included the markup and all the CSS taking affect on the page, for completeness:

<main>
  <div class="container">
    <div class="region region-first"></div>
    <div class="region region-second"></div>
    <div class="region region-third"></div>
    <div class="region region-fourth"></div>
  </div>
</main>

.container {
  *zoom: 1;
  max-width: 73.75em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.25em;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main .region:first-child {
  width: 66.1016949%;
  float: right;
}
main .region:nth-child(2) {
  clear: right;
  float: right;
  margin-right: 33.8983051%;
  width: 32.2033898%;
}
main .region:nth-child(3) {
  margin-right: -66.1016949%;
  width: 32.2033898%;
  float: right;
}
main .region:last-child {
  width: 32.2033898%;
  margin: 0;
}

Some Ideas for a Solution?

I started to poke the internals of Susy Next and tried called the span() function directly to just get widths, hooray this works where I just need a value for width: , however...

...where I am doing margin-right: span(4 + $gutter) the margin-right value needs to be the same value as push or pre would return, but I can't quite understand all the internals of how they work, my "magical float" of .75 when calculating $gutter is ever so slightly inaccurate, it might be right, but of course change a value in set-grid and it can be wrong, so its a rough guess at best.

What I need is a way to get the same value as pre would return, but of course just the value OR just a whole better way of doing the whole thing :)

.region {

  &:first-child {
    @include span(8 omega of 12);
  }

  &:nth-child(2) {
    $gutter: $gutters * .75;
    margin-right: span(4 + $gutter);
    width: span(4);
    float: right;
    clear: right;
  }

  &:nth-child(3) {
    margin-right: - span(8);
    width: span(4);
    float: right;
  }

  &:last-child {
    width: span(4);
  }
}

Solution

You're right - it's totally possible and not even very hard in Susy Next:

.region {
  &:first-child { @include span(last 8); }
  &:nth-child(2) {
    clear: right;
    @include span(4 at 5 isolate);
  }
  &:nth-child(3) { @include span(last 4 isolate); }
  &:last-child { width: span(4); }
}

The isolation option allows you to position elements at specific locations on the grid.