Make flex list items stagger into multiple lines on smaller screens
<p>I am attempting to make a css flex list stagger text onto two lines on smaller screens however nothing I've tried seems to work.</p>

<p>I've attempted to use spans and <code>br</code> at several different media queries but to no avail. Any help would be greatly appreciated. </p>

<p>This is how I would like it to look:</p>

<pre><code>                               Text Text Text Text Text 
                                    Text  Text  Text 
</code></pre>

<p>Here is my code </p>

<p>Html</p>

<pre><code>&lt;div class="div"&gt;
        &lt;h1 class="text-center"&gt;List&lt;/h1&gt;
        &lt;ul id ="list"&gt;
          &lt;li&gt;One&lt;/li&gt;
          &lt;li&gt;Two&lt;/li&gt;
          &lt;li&gt;Three&lt;/li&gt;
          &lt;li&gt;Four&lt;/li&gt;
          &lt;li&gt;Five&lt;/li&gt;
          &lt;li&gt;Six&lt;/li&gt;
          &lt;li&gt;Seven&lt;/li&gt;
          &lt;li&gt;Eight&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>Css</p>

<pre><code>.div {
  width: 100%;
  height: 225px;
  background-color: #dbdbdb;
  white-space: normal;
  background-attachment: fixed;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 30px;
}
.div h1 {
  font-size: 70px;
  color: black;
  font-family: "Helevtica";
  position: relative;
  top: -15px;
}
#list li {
  position: relative;
  bottom: -25px;
  color: black;
}

#list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  padding-right: 25px;
}
</code></pre>

<p>And here is a <a href="http://codepen.io/kgoode517/pen/bpzwOy" rel="nofollow">Code pen</a></p>