title: Display:none Property not working on responsive website
body: <p>I#m struggling with an media query issue. </p>
  
  <p>In the PROJECTS section I want 3 Cards displayed, the way I want do do this is to HIDE card 4 on DESKTOP. </p>
  
  <p>When on Mobile, I want the second (Alias Photography) card to appear FIRST therefore I want to hide card 1. </p>
  
  <p>On small screens, so anything below 575px, I have set card-1 to property display:none. THIS WORKS</p>
  
  <p>But when i scale up to anything larger than 575px, The display:none property on card-4 DOESNT work, and I think it wont work. </p>
  
  <p>Please can someone inspect my code on my website to see why this might be happening? below is the link to my website I'm making currently. </p>
  
  <p><a href="http://www.oliver-stott.co.uk" rel="nofollow noreferrer">www.oliver-stott.co.uk</a></p>