title: Divide a list of elements into 2 to 3 columns depending on screen size
body: <p>So I have to upgrade an old site (the hardcoded-style tier old site) into a 2k17 responsive website. So I'm basically using CSS and HTML (also PHP and Javascript but for the controller and model interactions - I'd like to avoid it as much as possible because clean code matters).</p>
  
  <p>Once again, if possible, I'd like to have an HTML/CSS based solution, thank you.</p>
  
  <p>I'm using bootstrap 3.3.7 and its grid display to make it work, but there's one page that bothers me.</p>
  
  <p>I have a list of elements I would like to display in a table that would be composed of two or three columns depending on the screen size (see the image below).</p>
  
  <p><a href="https://i.stack.imgur.com/XG5pr.png" rel="nofollow noreferrer">The type of display I'd like to get</a></p>
  
  <p>/!\ The order of the elements must be preserved.</p>
  
  <p>/!\ The columns have to be separated to make it look like a table.</p>
  
  <p>I'm afraid I'm not good enough with boostrap to figure out how to do it.</p>
  
  <p>NB : I'm coding "thinking about little resolutions first" so the image might be misleading.</p>
  
  <p>Any hint is appreciated :)</p>