Make column order different to source order with Neat grids?

Question

Im using the Neat grid framework for Bourbon. How can I have a columns laid out differently to there source order?

So in the example below testB comes before testC in the source order. But I would like the left hand column to be testC and the right hand column to be testB.

.testA {
  @include outer-container;
}

.testB {
  @include span-columns(6);
  @include shift(6);
}

.testC {
  @include span-columns(6);
  @include shift(-6);
}

<div class="testA">
    <div class="testB">1</div>
    <div class="testC">2</div>
</div>

I need this:

Ive got it working with this but im not sure if this is the proper way:

.testA {
  @include outer-container;
}

.testB {
  @include span-columns(6);
  @include shift(6 of 12);
}

.testC {
  @include span-columns(6);
  @include shift(-12 of 12);
}

So the first column is shifted 6 rows to the right, which makes sense to me. Then the second column now needs to be shifted 12 to the left (6 from its starting position, and 6 more now that its been moved by the first column).

I cant find any official documentation on doing this. Can someone confirm this is correct and not a hack?

score 0 · Answer 1 · answered May 05 '16 at 23:03

Wrap block in @include direction-context(right-to-left) {} and remove shift

@include direction-context(right-to-left) {
 .testB {  @include span-columns(6); }
 .testC {  @include span-columns(6); }
}

If it will not work start playing with span columns - add for .testC 5 instead of 6 columns.

Make column order different to source order with Neat grids?

1 Answers1