.flex {
  display: flex;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  box-sizing: border-box;
}

.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xl-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xl-4,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xl-6,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xl-9,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xl-12 {
  padding: 0 15px;
}

/* // 响应显示和隐藏 */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xl {
  display: none !important
}


.col-xs-3 {
  width: 25%;
}

.col-xs-4 {
  width: 33.333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-12 {
  width: 100%;
}

/*   xs */
@media(max-width: 800px) {
  .hidden-xs {
    display: none !important;
  }

  .visible-xs {
    display: block !important;
  }

  .visible-xs-flex {
    display: flex !important;
  }

}

/* sm */

@media (min-width: 801px) {
 
  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.333333%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-12 {
    width: 100%;
  }
}
@media (min-width:801px) and (max-width: 1023px) {
  .hidden-sm {
    display: none !important;
  }

  .visible-sm {
    display: block !important;
  }

 
}

/* md */
@media (min-width:1024px) {
  
  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.333333%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-12 {
    width: 100%;
  }
}
@media (min-width:1024px) and (max-width: 1279px) {
  .hidden-md {
    display: none !important;
  }

  .visible-md {
    display: block !important;
  }


}


/* lg */

@media (min-width:1280px) {
  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.333333%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-12 {
    width: 100%;
  }
}
@media (min-width:1280px) and (max-width: 1599px) {
  .hidden-lg {
    display: none !important;
  }

  .visible-lg {
    display: block !important;
  }

  
 

}

/* /xl */
@media (min-width:1600px) {
  .hidden-xl {
    display: none !important;
  }

  .visible-xl {
    display: block !important;
  }

  
  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.333333%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-12 {
    width: 100%;
  }
}

@media (max-width: 800px) {}