Menu icon Foundation
How to reposition a column semantically?

Hi there does any one know how to preposition a column so the last column loads first on small break point but semantically?

.colStyle {
  @include grid-row;
}
.colLeft {
  @include grid-column(6);
  @include breakpoint(large) {
    @include grid-column(6, 0);
  }

  @include breakpoint(small) {
    @include grid-column(12, 0);

  }
}
.colRight{
 
  @include breakpoint(large) {
    @include grid-column(6, 0);
  }
  @include breakpoint(small) {
    //This column must load first
    @include grid-column(12,0);
  }
}

push and pull column semantically?

Hi there does any one know how to preposition a column so the last column loads first on small break point but semantically?

.colStyle {
  @include grid-row;
}
.colLeft {
  @include grid-column(6);
  @include breakpoint(large) {
    @include grid-column(6, 0);
  }

  @include breakpoint(small) {
    @include grid-column(12, 0);

  }
}
.colRight{
 
  @include breakpoint(large) {
    @include grid-column(6, 0);
  }
  @include breakpoint(small) {
    //This column must load first
    @include grid-column(12,0);
  }
}
Rafi Benkual almost 3 years ago

You'd want to change the code source order so that the column you want first on mobile is first. 

From there, use 

@include grid-col-pos();