Twitter Bootstrap column not displaying properly on some screen sizes
===

I'm working on a website with Twitter Bootstrap.

I have a row with 4 columns :

    %ul.thumbnails
      %li.span3
      .thumbnail
        %a{href:"#"}
          %img{src:"http://placehold.it/260x180", alt:""}
        .thumb_info
          %h5= truncate("Dot. The world smallest stop motion", length:25)
          %p
            %i.icon-eye-open
            11
            %i.icon-heart
            1  

     %li.span3
      .thumbnail
        %a{href:"#"}
          %img{src:"http://placehold.it/260x180", alt:""}
        .thumb_info
          %h5= truncate("Dot. The world smallest stop motion", length:25)
          %p
            %i.icon-eye-open
            11
            %i.icon-heart
            1
     %li.span3
      .thumbnail
        %a{href:"#"}
          %img{src:"http://placehold.it/260x180", alt:""}
        .thumb_info
          %h5= truncate("Dot. The world smallest stop motion", length:25)
          %p
            %i.icon-eye-open
            11
            %i.icon-heart
            1
     %li.span3
      .thumbnail
        %a{href:"#"}
          %img{src:"http://placehold.it/260x180", alt:""}
        .thumb_info
          %h5= truncate("Dot. The world smallest stop motion", length:25)
          %p
            %i.icon-eye-open
            11
            %i.icon-heart
            1

I am using a responsive design so the columns adapts. However, on some scree displays, I get a bad result.

This is the desired result I get on my normal scree size :

![desired result][1]

And this is what I get when I shrink my browser window

![bad result][2]

However, if I shrink more, the result looks like the first one...

My guess is that the picture format (260x180) is not good for 4 columns. I just don't know what size would be good...

  [1]: http://i.stack.imgur.com/QNTQh.png
  [2]: http://i.stack.imgur.com/I35Iw.png