Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Media Query Exercise</title>
<style id="jsbin-css">
@media screen and (min-width: 400px) {
    .media-container {
        color: red;
    }

    .blue, .green {
        display: none;
    }
}

@media screen and (min-width: 450px) {
    .media-container {
        color: blue;
    }

    .green, .red {
        display: none;
    }

    .blue {
        display: inline;
    }
}

@media screen and (min-width: 500px) {
    .media-container {
        color: green;
    }

    .blue, .red {
        display: none;
    }

    .green {
        display: inline;
    }
}
</style>
</head>
<body>
  <div class="media-container">My color is
    <span class="red">red</span>
    <span class="blue">blue</span>
    <span class="green">green</span>
  </div>


<script id="jsbin-source-css" type="text/css">@media screen and (min-width: 400px) {
    .media-container {
        color: red;
    }

    .blue, .green {
        display: none;
    }
}

@media screen and (min-width: 450px) {
    .media-container {
        color: blue;
    }

    .green, .red {
        display: none;
    }

    .blue {
        display: inline;
    }
}

@media screen and (min-width: 500px) {
    .media-container {
        color: green;
    }

    .blue, .red {
        display: none;
    }

    .green {
        display: inline;
    }
}</script>
</body>
</html>