Responsive div's on one line - html

Question

I've been struggling for this a couple of days now. I googled a lot but can't find the right answer. I'm building an website and want to make it full responsive. On my homepage i have 3 blocks of tekst (300 width each). On screens bigger then 1000 pixels they are centered. Until this point i didn't had any issues.
But when the screens become smaller then 1000 pixels i want the blocks to be underneath each other and center to the screen it's been seen from. For an example of my idea visit http://www.t-mobile.nl.If you make your browser smaller the 3 promotion blocks will automatically change to fit your screen.
I also want the blocks to be in formation all the time. Or 3 blocks vertical or 3 blocks horizontal. Not 2 blocks on 1 row and the other on the row below them.
I tried to set the div container to width: 60% but then i get an big space at the left side on a smaller screen. The blocks also don't line up as i would hope.
I made an JSFiddle of the part i already have. You can visit it here: https://jsfiddle.net/gertjan2805/vj0grfpy/
Does anyone know how to fix this? It would be a great help :)
This is my HTML:
<div class="container">
<div class="containersmall">
<div class="top">DIV Test</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div>
<div class="containersmall">
<div class="top">DIV Test</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div>
<div class="containersmall">
<div class="top">DIV Test</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div></div>
body {
background-color: #EDEDED;
font-family: 'Verdana';
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
}
.container {
width: 1005px; /*1005px or 59%*/
margin: auto;
position: relative;
text-align:center;
}
.containersmall {
width: 310px;
float: left;
margin-left: 25px;
}
.top {
width: 310px;
background-color: #67B3BD;
text-align: center;
font-size: 22px;
color: #FFFFFF;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: auto;
padding-top: 20px;
float: left;
}
.text {
width: 300px;
text-align: justify;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
margin: auto;
padding: 5px;
background-color: #FFFFFF;
float: left;
}

Answer 1

There are two ways: media queries or flexbox.
For media queries, something like this may suffice (not tested):
#media (max-width : 1000px){
.containersmall {
clear:both;
width:100%;
}
}
For flexbox, I'm going to refer you to a tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps,
Chris

Answer 2

What you need are media queries - for anything below 1000px (inclusive), you will want to set width container boxes at 100%, something like:
#media only screen and (max-width: 1000px) {
.container {
width: 100%;
}
.containersmall {
width: 100%;
}
.top {
width: 100%;
}
etc...
}
So you should have no fixed values for any element within box.