.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; } }