Floating issue on resize with bootstrap

I have a list of items aligned using bootstrap grid layout with the following html, resulting the below pic where S1 is on a larger viewport than S2:

 <ul class="row">
            <li class="col-xs-6 col-sm-6 col-md-4 bottom-20" > 
                ...
            </li> 

            <li class="col-xs-6 col-sm-6 col-md-4">
                ...
            </li> 

            <li class="col-xs-6 col-sm-6 col-md-4 bottom-20">
                ... 
            </li> 
    </ul>

Knowing that all items float left, it seems that at a certain viewport (max-width: 484px) and (min-width: 443px) when I resize the browser, the third list item floats right, knowing that it shall float left relative to the original bootstrap behavior.

Upon investegation, it seems that this is caused by the previous elements sizes reacting to browser resize, when PIC1s text wraps to a new line, PIC3 floats to the right, when PIC2s text wraps to a new line, PIC3 floats back to left.

I really could not understand how this is technically happenning.

As a solution, I though of resizing the list items on browser resize to take the height of the list item with maximum height but I bet there is a much better approach with CSS only??