title: Change layout from row to grid on screen resize
body: <p>I have a very specific UX request. I have four links within a container, one next to each other in one row, separated by a vertical line.</p>
  <p><strong>Example:</strong></p>
  <p>Link one | Link two | Link three | Link four</p>
  <p>This is the layout if they all fit within the container. Once the user decrease the screen size and the links don't fit anymore, I want to switch the layout to 2 rows and 2 columns. And to have a horizontal divider between the rows.
  Also, the existence of links is variable. If there are just three links, the third link is extended over the whole bottom row.</p>
  <p><strong>Example:</strong></p>
  <p>Link one | Link two</p>
  <hr />
  <p>Link three | Link four</p>
  <p><em>Or</em></p>
  <p>Link one | Link two</p>
  <hr />
  <p>Link three</p>
  <p>I would like to achieve this behaviour without using JS if possible. Ideally by using Flexbox or Bootstrap.
  Is it possible?</p>