Problems with responsive design - item placement

Question

Well, I’m developing a project, and eventually a bug came up, just need to fix it, tried several ways but could not fix

IMG 1:

IMG 2: Image one shows the elements all cluttered by the screen, however, this occurs in very few resolutions, some are '1206', '910' wide, I would like to know how best to correct this, and what caused

CSS:

.container #paginacao{
    margin-bottom: 50px;
}
.container #paginacao .video-figure{
    display: block;
    margin: auto;
    margin-bottom: 30px;
}
.container #paginacao .video-figure img{
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.container #paginacao .video-figure figcaption h4{
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: 800;
    font-family: 'Open Sans', sans-serif;
}
.container #paginacao .video-figure figcaption p span{
    text-transform: uppercase;
}
.container #paginacao .video-figure figcaption p i{
    margin-right: 5px;
}
#paginacao{
    float: left;
    width: 100%;
}
@media (max-width: 629px){
    .container #paginacao figure{
        width: 100%;
        max-width: 460px;
    }
}
@media (min-width: 630px){
    .container #paginacao .video-figure{
        float: left;
        display: inline-block;
        width: 47.382716049382715%;
    }
    .container #paginacao .video-figure:nth-child(2n){
        float: right;
    }
}
@media (min-width: 830px){
    .container #paginacao .video-figure:nth-child(2n){
        float: left;    
    }
    .container #paginacao .video-figure{
        margin-right: 2.7538726333907055%;
        width: 31.497418244406195%;
    }
    .container #paginacao .video-figure:nth-child(3n){
        margin-right: 0;
    }
}
@media (min-width: 1024px){
    .container #paginacao .video-figure{
        width: 23.325892857142858%;
        margin-right: 2.232142857142857%;
    }
    .container #paginacao .video-figure:nth-child(3n){
        margin-right: 2.232142857142857%;
    }
    .container #paginacao .video-figure:nth-child(4n){
        margin-right: 0%;
    }   
}

HTML:

<div class="container">
    <!-- Miniaturas dos Vídeos -->
    <div id="paginacao">
        <figure class="video-figure">
            <img src="img/hqdefault.jpg">
            <figcaption>
                <h4>CAIXA DE EMAIL CHEIA</h4>
                <p><span>Palavra - </span><i class="fa fa-calendar" aria-hidden="true"></i> 10 de Maio de 2015</p>
            </figcaption>
        </figure>
        ...
    </div>
</div>

*HTML BASE, image field repeats 20 times.

Answer 1

Whoa, that’s all right?

In my projects I use FLEX a lot

I’ll put it like it would for your basically!

You should always use FLEX in the container that is grouping the items you want to align!

Would look like this:

#paginacao{
   display: flex;
   align-items: center;
   flex-flow: row wrap;
   justify-content: space-around;
}

Example in jsfiddle: https://jsfiddle.net/zcejwybh/

Answer 2

Simple ... you can solve this your problem by simply putting a min-height as a rule of its class .video-figure.

If you pay attention to the first block in IMG1, you will notice that information 10 de Maio de 2015 broke line, automatically increasing the height of your box, for this reason the 5th box fit below the 2nd and not below the 1st.

Solution in Bootstrap
This problem can be solved with a simple min-height, or you can prevent it from happening using Bootstrap, and even guaranteeing more quality in your code, each line of your grid could be easily built in Bootstrap, this way:

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
</div>