两种宽度之间和第三种宽度以上的媒体查询

.container {
  padding: rem(16px);
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 600px) and (max-width: 768px) and (min-width: 1550px) {
  /* want this to turn into a row in between 600 and 768 and over 1550px but the above doesn't seem to work */
  .container {
    flex-direction: row;
    align-items: center;
  }
}

/* have also tried 
@media only screen and (min-width: 600px) and (max-width: 768px),
@media only screen and (min-width: 1550px) {
  this does not work either
}

*/

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
</div>