ildi-wp/dev/scss/components/_global-head.scss

.global-head {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  width: 83%;

  > * {
    flex: 0 0 auto;
  }

  .logo-banner { order: 1; }
  .search-form { order: 2; }
  .header-menu { order: 3; }
  .utility-menu { order: 4; }
}

@media screen and (min-width: #{$screen-tablet}) {
  .global-head {
    width: $container-tablet;

    .utility-menu { order: 1; }
    .search-form { order: 2; }
    .logo-banner { order: 3; }
    .header-menu { order: 4; }

    .utility-menu,
    .search-form  {
      flex: 1 0 auto;
      width: auto;
    }

  }
}

@media screen and (min-width: #{$screen-tablet-lg}) {
  .global-head {
    width: $container-tablet-lg;
  }
}

@media screen and (min-width: #{$screen-desktop}) {
  .global-head {
    width: $container-desktop;
  }
}

@media screen and (min-width: #{$screen-desktop-lg}) {
  .global-head {
    width: $container-desktop-lg;
  }
}