Responsive elements - stretching and then stacking - html

Question

I'm fairly new to responsive web design, so don't beat me up too badly.
I have a currently fixed-width gallery page that is 1000px wide. The 1000px outer div has 30px padding and 30px between each pair of images. So I've got 910px of space available for each pair. The page might look like this:
(30px spacing)(500px img)(30px spacing)(410px image)(30px spacing)
(30px spacing)(480px img)(30px spacing)(430px image)(30px spacing)
(30px spacing)(450px img)(30px spacing)(440px image)(30px spacing)
...etc.
I'd like to convert it to a responsive page so that the images scale down as the browser window shrinks and ultimately stack on top of each other once the browser window drops below 640px.
The only way I know to make this 640px change is inside a stylesheet. Is this the only way I can do this? Am I going to have to define styles within the stylesheet for every image?
For example, for a 480px wide image:
img.img480 {
width: 48%;
float: left;
}
#media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}

Answer 1

Here is an example of the effect you're asking for with responsive design.
A couple things to note:
margins are bad, use padding and wrappers instead
floats are bad, use inline-block instead
(Demo)
html, body {
margin: 0;
}
.wrapper {
padding: 0 15px;
font-size: 0;
}
.img-wrp {
width: 50%;
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
.img-wrp img {
width: 100%;
}
#media screen and (max-width: 640px) {
.img-wrp {
width: 100%;
}
}
<div class="wrapper">
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>