Simplest responsive layout with columns()

example-responsive.scss

body.example-responsive-layout {
  @include animation("fade-in 2s");
  font-family: sans-serif;
  
  // Medium sizes
  @media all and (min-width: 800px) {
    @include columns(2);
  
    // Use this to break across all of them, like a footer
    .footer {
      -webkit-column-span: all;
      -moz-column-span: all;
      column-span: all;
    }
    
    // Dont break (wrap) columns inside some elements
    .bridgeEmbed__item {
      @include column-break(inside, avoid);
    }
  }
  
  // Largest size (more than a min width) gets a third column
  @media all and (min-width: 1200px) {
    @include columns(3);
  }
}