@supports (display: flex) {
  .flexbox {
    display: flex;
  }

  .row.flexbox {
    flex-direction: row;
  }

  .flexgrid {
    flex-wrap: wrap;
    flex: 0 1 auto;
    margin-right: -2rem;
    margin-left: -2rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-flex: 0;
  }

  .flexgrid .col {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  @media screen and (min-width: 480px) {
    .flexgrid .col-6 {
      flex-basis: 50%;
      max-width: 50%;
    }
  }


  .flexgrid .col-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .flexgrid .col .img-responsive {
    width: 100%;
  }

  .align-center {
    align-items: center;
  }

  .flexbox .span1,
  .flexbox .span2,
  .flexbox .span3,
  .flexbox .span4,
  .flexbox .span5,
  .flexbox .span6,
  .flexbox .span7,
  .flexbox .span8,
  .flexbox .span9,
  .flexbox .span10,
  .flexbox .span11,
  .flexbox .span12 {
    float: none;
  }
}