Make images stack for mobile

Question

I am trying to create a page with two images side by side on desktop, then have those images stack for mobile. I am making my browser window smaller to simulate a smaller screen. The images are not stacking on mobile. Here's my html:

<div class="container-lp">
    <div class="col-2-lp">
      <h4><a href="#">Interior Decorating</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" /></a>
      </div>
      <div class="overlay"></div>
    </div>
    <div class="col-2-lp last-lp">
      <h4 class="landing-page"><a href="#">Home Staging</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" /></a>
      </div>
    </div>
  </div>

Here is my CSS for desktop:

.container-lp {
  width: 100%;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  clear: both;
}

.col-2-lp {
  float: left;
  width: 45%;
  margin-right: 5%;
}

.last-lp {
  margin-right: 0;
}

.col-2-lp img {
  width: 100%;
}

And my media query:

@media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
  .col-2-lp {
    width: 100%;
    float: none;
    margin: auto;
  }
  .last-lp {
    margin-right: auto;
  }
}

Answer 1

There is no problem in your code. You cannot test device media queries on pc browser try this instead

@media only screen and (min-width : 320px) and (max-width : 600px) {
}