Как в html5, разместить объекты <figure> в две строчки три столбца, без таблиц?

[luxwood]

Как в html5, разместить объекты  <figure> в две строчки три столбца, без таблиц?  спасибо.

Применяя float: left; первые три блока  размещаются как необходимо, а вот со следующими тремя блоками - беда. Ни как они не хотят, следующей строкой (((

.a1 {
    background: #FFFFFF; 
    border:5px;
    padding: 10px; 
    display: block; 
    width: 150px; 
    float: left;
    margin: 0 10px 10px 0; 
    text-align: center; 
   }

 

<! -- первые 3 блока —->

<article>        
            <figure class="a1">
                    <p><img src="image.png" alt=""></p>
                    <figcaption class="kolocaption">text</figcaption>
              </figure>
             <figure class="a1">
                    <p><img src="image.png" alt=""></p>
                    <figcaption class="kolocaption">text</figcaption>
              </figure>
            <figure class="a1">
                    <p><img src="image.png" alt=""></p>
                    <figcaption class="kolocaption">text</figcaption>
              </figure>
       </article>  

[Alexandr37]

https://jsfiddle.net/ru3eyws2/