0

I want to create an additional breakpoint with a different behavior for columns for mobile, tablet and dektop.
This is what I'm looking to realize:

Desktop:

<----ELEMENT 1----><----ELEMENT 2----><-----SIDEBAR----->

Tablet:

<----ELEMENT 1----><-----SIDEBAR----->
<----ELEMENT 2---->

Mobile:

<----ELEMENT 1---->
<----ELEMENT 2---->
<-----SIDEBAR----->

I've tried to use the scss function used to add the mobile-n style and switch from 12 columns to 9 columns in the tablet version, but I think I miss something. 

$tabletTotalColumns: 9;

/* Tablet 4-column Grid */
@for $i from 1 through $tabletTotalColumns {
  .row {
    .tablet-#{convert-number-to-word($i)} { width: gridCalc($i, $tabletTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
      &:last-child { float: $defaultOpposite; }
      &.end { float: $defaultFloat; }
    }
    &.collapse {
      .tablet-#{convert-number-to-word($i)} { padding: 0; }
    }
  }
}
4

1 回答 1

0

这个问题与我之前回答过的问题非常相似：zurb Foundation Trouble ordering mobile and stacking cause form input to be unclickable

由于您正在无序折叠列，因此您需要使用推拉类来改变行为。示例（如上所示）没有使用 sass，但它会让您了解需要使用或扩展哪些类来完成布局。

于 2013-02-07T16:12:49.943 回答