.#{$prefix}col {
  float: left;
  flex: 0 0 auto;

  &-0 {
    display: none;
  }

  // 循环栅格
  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    &-#{$i} {
      display: block;
      position: relative;
      width: percentage($percentage);
    }

    &-xm-#{$i} {
      width: percentage($percentage);
    }

    @media (min-width: $screen-sm) {
      &-sm-#{$i} {
        width: percentage($percentage);
      }
    }

    @media (min-width: $screen-md) {
      &-md-#{$i} {
        width: percentage($percentage);
      }
    }

    @media (min-width: $screen-lg) {
      &-lg-#{$i} {
        width: percentage($percentage);
      }
    }

    @media (min-width: $screen-xl) {
      &-xl-#{$i} {
        width: percentage($percentage);
      }
    }

    &-offset-#{$i} {
      margin-left: percentage($percentage);
    }

    &-push-#{$i} {
      right: percentage($percentage);
    }

    &-pull-#{$i} {
      left: percentage($percentage);
    }

    &-order-#{$i} {
      order: $i;
    }
  }

  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    @media (min-width: $screen-sm) {
      &-xs-#{$i} {
        width: percentage($percentage);
      }
    }
  }

  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    @media (min-width: $screen-sm) {
      &-sm-#{$i} {
        width: percentage($percentage);
      }
    }
  }

  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    @media (min-width: $screen-md) {
      &-md-#{$i} {
        width: percentage($percentage);
      }
    }
  }

  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    @media (min-width: $screen-lg) {
      &-lg-#{$i} {
        width: percentage($percentage);
      }
    }
  }

  @for $i from 1 through $gridColumns {
    // 栅格公式
    $percentage: (100 / (($gridColumns / $i)) / 100);

    @media (min-width: $screen-xl) {
      &-xl-#{$i} {
        width: percentage($percentage);
      }
    }
  }
}