Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
  <div class="container">
    <div class="col">
      <p>1 Nullam mattis nisl sit amet feugiat vulputate. Duis et tincidunt mi. Curabitur condimentum eget purus non porttitor. Maecenas sed lacus eu nisl vulputate tristique ut non dolor. In imperdiet felis et ex tincidunt lacinia. Proin sem massa, faucibus vel nulla eget, interdum scelerisque nibh.</p>
    </div>
    <div class="col">
      <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
    <hr class="splitter">
    <div class="col">
      <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
    <div class="col">
      <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "susy";
@import "breakpoint";

$susy: (
  columns: 12,
  gutters: .25,
  gutter-position: split
);

.container {
  @include container(60em);
}

.col {
  @include span(1 of 2);
  
  @include breakpoint(1300px){
    @include span(3 of 12);
  }
}

.splitter {
  @include span(100%);
  @include breakpoint(1300px){
    display: none;
  }
}

SassMeister-output.css

.container {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.col {
  width: 40%;
  float: left;
  margin-left: 5%;
  margin-right: 5%;
}
@media (min-width: 1300px) {
  .col {
    width: 23.33333%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
  }
}

.splitter {
  width: 100%;
  float: left;
  margin-left: 0.83333%;
  margin-right: 0.83333%;
}
@media (min-width: 1300px) {
  .splitter {
    display: none;
  }
}

SassMeister-rendered.html

<section>
  <div class="container">
    <div class="col">
      <p>1 Nullam mattis nisl sit amet feugiat vulputate. Duis et tincidunt mi. Curabitur condimentum eget purus non porttitor. Maecenas sed lacus eu nisl vulputate tristique ut non dolor. In imperdiet felis et ex tincidunt lacinia. Proin sem massa, faucibus vel nulla eget, interdum scelerisque nibh.</p>
    </div>
    <div class="col">
      <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
    <hr class="splitter">
    <div class="col">
      <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
    <div class="col">
      <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
  </div>
</section>