Making a list responsive with a fun breakpoint sass map with keys (Generated by SassMeister.com)

list.html

<ol class="four">
	<li>This is list item one</li>
	<li>This is what I like to call list item number two</li>
	<li>I am totally the third list item on this page, at least for now</li>
	<li>Last, but not least, I am number four</li>
</ol>

SassMeister-rendered.html

<ol class="four">
	<li>This is list item one</li>
	<li>This is what I like to call list item number two</li>
	<li>I am totally the third list item on this page, at least for now</li>
	<li>Last, but not least, I am number four</li>
</ol>

style.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.four li {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  margin-right: 0;
}
.four li:last-child {
  margin-right: 0;
}
@media (min-width: 900px) {
  .four li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .four li:last-child {
    margin-right: 0;
  }
  .four li:nth-child(2n) {
    margin-right: 0;
  }
  .four li:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 1100px) {
  .four li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .four li:nth-child(2n) {
    margin-right: 2.35765%;
  }
  .four li:nth-child(2n+1) {
    clear: none;
  }
  .four li:last-child {
    margin-right: 0;
  }
  .four li:nth-child(4n) {
    margin-right: 0;
  }
  .four li:nth-child(4n+1) {
    clear: left;
  }
}

style.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

// ------------------------------------------------------------
// Omega Reset
// ------------------------------------------------------------

@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}


$breakpoints: (
	large: 1100px,
	medium: 900px
);

@mixin wider-than($screen-size) {
	@if map-has-key($breakpoints, $screen-size) {
		@media (min-width: map-get($breakpoints, $screen-size)) {
			@content;
		}
	} @else {
		// Debugging - can be used thanks to map-has-key() instead of loop
		@warn "Breakpoint '#{$screen-size}' does not exist!"
 	}
}


.four li {
	@include span-columns(12);
	@include omega();
	@include wider-than(medium) {
	 @include span-columns(6);
	@include omega(2n);
	}
	@include wider-than(large) {
		@include omega-reset(2n);
		@include span-columns(3);
		@include omega(4n);
	}
}