Макет из 3 колонок в 2 столбца с Susy (например, твиттер)

Я уже некоторое время работаю с Susy и наткнулся на вариант использования, который, похоже, не могу понять. Лучший способ объяснить это — использовать Twitter в качестве примера.

Если вы посмотрите на их сайт, вы увидите, что они используют стандартный макет из трех столбцов с точкой останова на 1250. После достижения этой точки весь самый правый столбец 3 идет под столбец 1.

Как это делается с помощью чистого CSS в Susy 2? Когда я смотрю на твиттер, кажется, что они физически перемещают контент из столбца 3 в столбец 1. Я предполагаю, что все это делается с помощью JS, но я бы сделал это немного чище. Идеи?


css susy-compass susy-sass susy
person Mr. BigglesWorth    schedule 24.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, это было так же просто, как использовать точку останова в качестве еще одного миксина для моих колонок. я просто добавил

@import "breakpoint";

@include breakpoint (new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}
person Mr. BigglesWorth    schedule 24.08.2014