title: How to force a maximum amount of boxes in a row in flex?
body: <p>I have 4 total items that I want to display on a page. Two items on top and 2 below. The ones on the bottom dimensions need to be different from the ones on top. I am using flexbox to do this. The problem is, on a wide monitor the third item keeps wrapping to the top row. Here is my code.</p>
  
  <pre><code>.dashboard {
    &amp;-inner {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-content: center;
      min-height: 100vh;
      margin-top: $reporting-report-offset-top;
      max-width: 1900px;
  
      &amp;-grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
        overflow: hidden;
        max-height: 100%;
        margin: 0 auto;
        max-width: 1900px;
  
        &amp;-item {
          margin: $reporting-view-spacing;
          // &amp;-1 {
          //   min-width: 50%;
          // }
  
          &amp;-2 {
            // min-width: 50%;
            // margin-right: 100px
          }
  
          &amp;-3 {
            max-width: 238px !important;
            margin-right: 8px;
            height: 687px !important;
        }
  </code></pre>
  
  <p>The top two items will take 50% of the available width(margins included) the third item is intended to take approximately 25% of the bottom row and the 4th item the other 75%. How do I force the bottom item to the second row and stop it from wrapping to the top?</p>