html - How to put inline circles made in CSS under each other when screen scales? -

out there resources how make images, circles made in css it's bit tricky. code:

html

<div id="wrapper">         <ul id="circles">             <li>                 <div class="circle"><div>k</div></div>                 <div id="column"><p>some text here</p> </div>             </li>             <li>                 <div class="circle"><div>t</div></div>                 <div id="column"><p>some text here</p></div>             </li>             <li>                 <div class="circle"><div>r</div></div>                 <div id="column"><p>some text here</p></div>             </li>                <li>                 <div class="circle"><div>f</div></div>                 <div id="column"><p>some text here</p></div>             </li>         </ul>        </div>   

css

.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%; } 

i've styled bit on desktop size. when scale mobile screen size, 1 circle goes each other. want put under each other. when there not enough space 4 circles, 2 go down. when there not enough space 2 circles in 2 lines, want go separate line. every time should centered in middle of screen.

i tried table, doesn't worked because circle "transformed" elipse.

thanks answers

remove width #circles li , should stack instead of run each other

.circle {      display:table;      width: 10em;      height:10em;      border-radius: 50%;      overflow: hidden;      background: transparent;      box-shadow: 0 0 3px gray;  }    .circle div {      display:table-cell;      width:100%;      height:100%;      line-height:1em;      text-align:center;      vertical-align:middle;      font-size: 7em;      font-family:'raleway', sans-serif;      color:black;  }    #column {      width: 13em;  }  #circles {      margin: 0;      padding: 0;      list-style: none;  }  #circles li {      float: left;      margin:1.25%;  }  #wrapper {      max-width: 60em;      margin: 0 auto;      padding: 0 5%;  }

<div id="wrapper">      <ul id="circles">          <li>              <div class="circle">                  <div>k</div>              </div>              <div id="column">                  <p>some text here</p>              </div>          </li>          <li>              <div class="circle">                  <div>t</div>              </div>              <div id="column">                  <p>some text here</p>              </div>          </li>          <li>              <div class="circle">                  <div>r</div>              </div>              <div id="column">                  <p>some text here</p>              </div>          </li>          <li>              <div class="circle">                  <div>f</div>              </div>              <div id="column">                  <p>some text here</p>              </div>          </li>      </ul>  </div>