@media @breakpoint-md {

  .md-col {
    float: left;
    box-sizing: border-box;
  }

  .md-col-right {
    float: right;
    box-sizing: border-box;
  }

  .md-col-1 {
    width: 1/12 * 100%;
  }

  .md-col-2 {
    width: 2/12 * 100%;
  }

  .md-col-3 {
    width: 3/12 * 100%;
  }

  .md-col-4 {
    width: 4/12 * 100%;
  }

  .md-col-5 {
    width: 5/12 * 100%;
  }

  .md-col-6 {
    width: 6/12 * 100%;
  }

  .md-col-7 {
    width: 7/12 * 100%;
  }

  .md-col-8 {
    width: 8/12 * 100%;
  }

  .md-col-9 {
    width: 9/12 * 100%;
  }

  .md-col-10 {
    width: 10/12 * 100%;
  }

  .md-col-11 {
    width: 11/12 * 100%;
  }

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

}