title: Flex Wrap not working
body: <p>The following code doesn't seem to wrap up my content.
  I have made all possible changes to my code but can't seem to find a workable solution.
  In fact, it seems the browser is not responding to the wrap setting.
  Thanks in advance.
  I am working on a news website. I have an article. A small write up along with an image will be the main banner of the website. To make the website responsive, I need to wrap up the write up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mainArticle {
    width: 100%;
    height: 450px;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap-reverse;
  }
  
  .left,
  .right {
    /*float: left;*/
    box-sizing: border-box;
    height: 100%;
    width: 50%;
  }
  
  .left {
    /*flex-shrink: 1;
   flex-grow: 1;*/
    padding: 30px;
  }
  
  .right {
    padding: 20px;
    position: relative;
    /*display: block;*/
    /* flex-grow: 0;
   flex-shrink: 0;*/
  }
  
  .right img {
    position: relative;
    box-sizing: border-box;
    box-shadow: 5px 5px 6px rgba(242, 125, 12, 0.8);
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    /*display: block;*/
    border-radius: 10px;
  }
  
  #heading {
    font-size: 40px;
    font-family: serif;
    font-weight: 700;
    line-height: 1.3;
  }
  
  #subHeading {
    margin-top: 10px;
    font-size: 15px;
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 22.5px;
  }
  
  #detail {
    margin-top: 20px;
    padding-right: 10px;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1.5;
  }
  
  #readMore {
    display: inline-block;
    border-radius: 5px;
    padding: 12.5px;
    text-decoration: none;
    color: #f27d0c;
    margin-top: 20px;
    border: 2px solid #f27d0c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="mainBody"&gt;
    &lt;div class="mainArticle"&gt;
      &lt;div class="left"&gt;
        &lt;h1 id="heading"&gt;From The Desk of Director&lt;/h1&gt;
        &lt;h5 id="subHeading"&gt;Excerpt from an interview with Dr. b. k. mishra, director, iit goa&lt;/h5&gt;
        &lt;p id="detail"&gt;Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id
          euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.&lt;/p&gt;
        &lt;a id="readMore" href="#"&gt;Read More&gt;&gt; &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;img src="Images/sample.png" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="lineBelowArticle"&gt;&lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>