Why does media query only work when placed last in my CSS?

Question

I\'m learning css and I came across an example that has the following code:

   Hearts<         


        

Answer 1

It's about the placement, put the media query after the :before's and it will be ok

.CardLink {
  display: block;
  color: #666;
  text-shadow: 0 2px 0 #efefef;
  text-decoration: none;
  height: 2.75rem;
  line-height: 2.75rem;
  border-bottom: 1px solid #bbb;
  position: relative;
}
.CardLink:before {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.CardLink_Hearts:before {
  content: "❤";
}
.CardLink_Clubs:before {
  content: "♣";
}
.CardLink_Spades:before {
  content: "♠";
}
.CardLink_Diamonds:before {
  content: "♦";
}
@media (min-width: 300px) {
  .CardLink {
    padding-left: 1.8rem;
    font-size: 1.6rem;
  }
  .CardLink:before {
    display: block;
  }
}

Hearts
Clubs
Spades
Diamonds