CSS Columns

columns.html

<ul class="column-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

columns.scss

// Mixins
$screen-sm:  776px;
@mixin sm {
   @media (min-width: #{$screen-sm}) {
       @content;
   }
}

// List
.column-list {
    list-style: none;
    max-width: 750px;
    margin: 50px auto auto;
    width: 100%;
    // Create columns
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    li {
        text-transform: uppercase;
        font-size: 18px;
        margin-bottom: 20px;
        // Safari alignment fix
        display: inline-block;
        width: 100%;
    }
    @include sm  {
        // Create columns
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
    }
}