Make images stack for mobile - html

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>Interior Decorating</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" />
</div>
<div class="overlay"></div>
</div>
<div class="col-2-lp last-lp">
<h4 class="landing-page">Home Staging</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" />
</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) {
}

Answer 2

if this functionality is all you need, I would suggest looking up bootstrap. You can achieve the same thing without touching the CSS like this:
<div class="container">
<div class="row">
<div class="col-sm-6"><img src="#"></div>
<div class="col-sm-6"><img src="#"></div>
</div>
</div>

Answer 3

Here's an example:
Set everything to be 100%, then above a certain width set it 50%, then it should go side by side.
.image {
width: 100%;
}
#media screen and (min-width: 780px) {
.image {
width: 50%;
}
}
Here's a jsfiddle that shows a simple example