Sk Asraf Sk Asraf - 4 months ago 13x
CSS Question

Display two divs on mobile devices, but hide one on desktop, using media query

In my project I have two divs (i.e #div1, #div2). I want to show both divs on mobile devices and only #div1 on desktop devices.

@media screen and (max-width: 600px) {
#div1 {
display: none;

In this case, work as desktop show- #div1,#div2 and mobile showing #div2.

But I want desktop to show #div1, and mobile to show #div1,#div2

How can write a @media-query for this. I can't understand.


/* mobile first */

.div1, .div2 {
  padding: 20px;
  margin-bottom: 10px;

.div1 {
  background-color: pink;

.div2 {
  background-color: tan;

@media screen and (min-width: 600px) {
    display: none;
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>

You have it just swap out min for max in the media query.