html - How to display divs in a row responsively -

i'm trying make site using 6 divs in 2 rows this.

  [ ] [ ] [ ]   [ ] [ ] [ ] 

and when make browser smaller want displayer this:

  [ ] [ ]   [ ] [ ]   [ ] [ ] 

i've tried float, @media, inline-block , div containers doesn't work @ all, because display this:

  [ ] [ ]     [ ]    [ ] [ ]     [ ] 

please guys, tell me how resolve because i've tried many methods none worked.
thank help.

the key element you're looking

display: inline-block; 

for div. can give flexible widths element fit in outer div.

look here , try out here: http://jsfiddle.net/01ntlun5/

regards!