title: 4 div's in one line, move div to new line
body: <p>I have code like:</p>
  
  <pre><code>    &lt;div style="display: table; width: 100%; table-layout: fixed; border-spacing: 10px;"&gt;
  
  &lt;div style="text-align: center; display: table-cell;"&gt;
  &lt;a href="#"&gt;&lt;img src="/image.png" alt="" width="auto" border="0" /&gt;&lt;/a&gt;
  &lt;br&gt; 
  Text 
  &lt;/div&gt;
  
  &lt;div style="text-align: center; display: table-cell;"&gt;
  &lt;a href="#"&gt;&lt;img src="/image.png" alt="" width="auto" border="0" /&gt;&lt;/a&gt;
  &lt;br&gt; 
  Text 
  &lt;/div&gt;
  
  &lt;div style="text-align: center; display: table-cell;"&gt;
  &lt;a href="#"&gt;&lt;img src="/image.png" alt="" width="auto" border="0" /&gt;&lt;/a&gt;
  &lt;br&gt; 
  Text 
  &lt;/div&gt;
  
  
  &lt;div style="text-align: center; display: table-cell;"&gt;
  &lt;a href="#"&gt;&lt;img src="/image.png" alt="" width="auto" border="0" /&gt;&lt;/a&gt;
  &lt;br&gt; 
  Text 
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>it work correctly from PC, but on mobile devices it's work very ugly, all images and text go floor. How it can be modified, that the div can format 4x1 line, 2x2 line centered, 1x4 line centered (for mobiles).</p>