Try it Yourself: RWD Media Queries

RWD Media Queries

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid > * {
  flex: 1 1 260px;
}

@media (max-width: 700px) {
  .grid {
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .grid > * {
    flex-basis: 100%;
  }
}
</style>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid > * {
  flex: 1 1 260px;
}

@media (max-width: 700px) {
  .grid {
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .grid > * {
    flex-basis: 100%;
  }
}
</style>
</head>
<body>

</body>
</html>