Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="search">

  <ul class="search__links  search__left">
    <li class="search__link">A</li>
    <li class="search__link">B</li>
    <li class="search__link  hidden-lap-and-up">C</li>
    <li class="search__link  hidden-lap-and-up">D</li>
    <li class="search__link  hidden-lap-and-up">E</li>
  </ul>

  <form class="search__bar">
    <input type="text" class="search__input" />
  </form>
  
  <ul class="search__links  search__right  show-lap-and-up">
    <li class="search__link">F</li>
    <li class="search__link">G</li>
  </ul>

</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// GENERIC
* {
  box-sizing: border-box;
}



// COMPONENTS
/**
 * Complex Fancy Bar component.
 *
 * This component juggles several different display states
 * based on screen-sizes. It’s not very pretty, and wrangles
 * a lot of opposing MQs etc. in order to achieve the
 * desired effect. Sorry :(
 *
 * 1. Used as a crude clearfix.
 */
.search {
  overflow: hidden; /* [1] */
}

  /**
   * We have two groups of search links. They use table
   * layout to automagically take up all available space.
   *
   * 1. This forces elements to all occupy an equal amount
   *    of space as each other.
   */
  .search__links {
    margin:  0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: table;
    table-layout: fixed; /* [1] */
    text-align: center;
  }

    .search__link {
      display: table-cell;
      padding: 5px;
    }

/**
 * Left-most links are always visible, but we stack them
 * left on tablet-and-up screens.
 */
.search__left {

  @media screen and (min-width: 720px) {
    width: 20%;
    float: left;
  }

}

  /**
   * Central search bar.
   *
   * 1. Adds up to 100% with the other stuff.
   */
  .search__bar {
    @media screen and (min-width: 720px) {
      width: 60%; /* [1] */
      float: left;
      padding: 5px;
    }
  }

    .search__input {
      width: 100%;
    }


  /**
   * Right-most links are hidden on smaller screens, then
   * stack up horizontally on larger ones.
   *
   * 1. Added to the 20% on the left links and the 60% on
   *    the main bar, we get 100%.
   * 2. Hide entirely on smaller screens.
   */
  .search__right {
    float: left;
    width: 20%; /* [1] */

    @media screen and (max-width: 720px) {
      display: none; /* [2] */
    }

  }










// TRUMPS
@media screen and (min-width: 720px) {
  .hidden-lap-and-up {
    display: none;
  }
}

SassMeister-output.css

@charset "UTF-8";
* {
  box-sizing: border-box;
}

/**
 * Complex Fancy Bar component.
 *
 * This component juggles several different display states
 * based on screen-sizes. It’s not very pretty, and wrangles
 * a lot of opposing MQs etc. in order to achieve the
 * desired effect. Sorry :(
 *
 * 1. Used as a crude clearfix.
 */
.search {
  overflow: hidden;
  /* [1] */
}

/**
 * We have two groups of search links. They use table
 * layout to automagically take up all available space.
 *
 * 1. This forces elements to all occupy an equal amount
 *    of space as each other.
 */
.search__links {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: table;
  table-layout: fixed;
  /* [1] */
  text-align: center;
}

.search__link {
  display: table-cell;
  padding: 5px;
}

/**
 * Left-most links are always visible, but we stack them
 * left on tablet-and-up screens.
 */
@media screen and (min-width: 720px) {
  .search__left {
    width: 20%;
    float: left;
  }
}

/**
 * Central search bar.
 *
 * 1. Adds up to 100% with the other stuff.
 */
@media screen and (min-width: 720px) {
  .search__bar {
    width: 60%;
    /* [1] */
    float: left;
    padding: 5px;
  }
}

.search__input {
  width: 100%;
}

/**
 * Right-most links are hidden on smaller screens, then
 * stack up horizontally on larger ones.
 *
 * 1. Added to the 20% on the left links and the 60% on
 *    the main bar, we get 100%.
 * 2. Hide entirely on smaller screens.
 */
.search__right {
  float: left;
  width: 20%;
  /* [1] */
}
@media screen and (max-width: 720px) {
  .search__right {
    display: none;
    /* [2] */
  }
}

@media screen and (min-width: 720px) {
  .hidden-lap-and-up {
    display: none;
  }
}

SassMeister-rendered.html

<div class="search">

  <ul class="search__links  search__left">
    <li class="search__link">A</li>
    <li class="search__link">B</li>
    <li class="search__link  hidden-lap-and-up">C</li>
    <li class="search__link  hidden-lap-and-up">D</li>
    <li class="search__link  hidden-lap-and-up">E</li>
  </ul>

  <form class="search__bar">
    <input type="text" class="search__input" />
  </form>
  
  <ul class="search__links  search__right  show-lap-and-up">
    <li class="search__link">F</li>
    <li class="search__link">G</li>
  </ul>

</div>