title: Flexbox Form for Mobile not responding
body: <p>I would like to have the #ClickWordList li items to go under the message box. I've tried just about everything and the layout isn't budging. I've looked online and have found 0 solutions. Any suggestions highly welcomed. </p>
  
  <p>Html :</p>
  
  <p></p>
  
  <pre><code>&lt;h3 class="title"&gt;What new feature or section would you add?&lt;/h3&gt;
  &lt;h3 class="message-box"&gt;Message Box&lt;/h3&gt;
  
  &lt;div id="message-box-container"&gt;
      &lt;div class="form"&gt;
          &lt;div class="message"&gt;
              &lt;label for="txtMessage"&gt;&lt;/label&gt;
              &lt;textarea id="txtMessage" name="txtMessage" class="txtDropTarget ui-droppable"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
          &lt;div class="clickable-questions"&gt;
              &lt;ul id="ClickWordList"&gt;
                  &lt;li id="click1"&gt;&lt;/li&gt;
                  &lt;li id="click2"&gt;&lt;/li&gt;
                  &lt;li id="click3"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--message-box-container--&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>/*********** free form message styles ******/
  
  .form{
      display: flex;
  }
  .message {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      order: 1;
  }
  
  .message &gt; textarea {
      flex: 1;
      min-width: 18rem;
      max-height: 12rem;
      font-size: 12px;
      padding: 10px;
      outline: none;
  }
  
  .clickable-questions {
      flex: 1;
      order: 2;
      margin-right: 2rem;
  }
  
  #ClickWordList &gt; li {
      cursor: pointer;
      padding-bottom: 13px;
      line-height: 1.5;
      font-size: 14px;
  }
  </code></pre>