title: How to put inline circles made in CSS under each other when screen scales?
body: <p>Out there are resources how to make it with images, but with circles made in CSS it's a bit tricky. This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
          &lt;ul id="circles"&gt;
              &lt;li&gt;
                  &lt;div class="circle"&gt;&lt;div&gt;K&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="column"&gt;&lt;p&gt;Some text here&lt;/p&gt; &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="circle"&gt;&lt;div&gt;T&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="column"&gt;&lt;p&gt;Some text here&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="circle"&gt;&lt;div&gt;R&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="column"&gt;&lt;p&gt;Some text here&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;   
              &lt;li&gt;
                  &lt;div class="circle"&gt;&lt;div&gt;F&lt;/div&gt;&lt;/div&gt;
                  &lt;div id="column"&gt;&lt;p&gt;Some text here&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;       
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.circle {
  width: 10em;
  height: 0;
  padding-bottom: 10em;
  border-radius: 50em;
  border: 0.1em solid white;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 3px gray;
  }
  
  .cirlce div {
  float:left;
  width:100%;
  padding-top:50%;
  line-height:1em;
  margin-top:-0.5em;
  text-align:center;
  font-size: 7em; 
  font-family: 'Raleway', sans-serif;
  color:white;
  }
  
  #column {
      width: 13em;   
  }
  
  #circles {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  
  #circles li {
  float: left;
  width:22.5% ;
  margin:1.25% ;
  }
  
  #wrapper {
  max-width: 60em;
  margin: 0 auto;
  padding: 0 5%;
  }
  </code></pre>
  
  <p>I've styled it for a bit on desktop size. When I scale it to mobile screen size, one circle goes into each other. I want it put under each other. When there will not be enough space for 4 circles, two will go down. When there will not be enough space for two circles in two lines, I want it to go to the separate line. Every time it should be centered in the middle of the screen.</p>
  
  <p>I tried to do it with table, but that doesn't worked because circle was "transformed" to elipse.</p>
  
  <p>Thanks for answers</p>