title: Switching flex items from row to column alignment
body: <p>I have a 'card' like html component, that it displays this way:</p>
  
  <pre><code>+------+-----------------+-------+
  |   1  |        2        |   3   |
  +------+-----------------+-------+
  </code></pre>
  
  <p>And when I go under the 720px I want that became like this:</p>
  
  <pre><code>+------+-------------------------+
  |      |        2                |
  |   1  +-------------------------+
  |      |        3                |
  +------+-------------------------+
  </code></pre>
  
  <p>I am having difficulties to figure out how can I achieve this with flexbox. I am wondering if it is the right solution for this kind of problem.</p>
  
  <p>the initial state, is currently like this:</p>
  
  <pre><code>&lt;div class="card"&gt;
            &lt;div class="status"&gt;&lt;/div&gt;
            &lt;div class="title"&gt;Tryout.it&lt;/div&gt;
            &lt;div class="details"&gt;156 emails&lt;/div&gt;
            &lt;div class="action"&gt;&lt;button&gt;go&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS something like this:</p>
  
  <pre><code>.card {
    margin: 10px;
    min-width: 320px;
    min-height: 42px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 9px 10px;
  }
  .card .status {
    width: 30px;
    height: 24px;
  }
  .card .title {
    flex-grow: 1;
  }
  </code></pre>