title: flex-wrap not working on my div
body: <p>At 928px breakpoint, I am looking to achieve that:</p>
  
  <ol>
  <li><p>My right column (<code>.vd-right-col</code>) needs to be placed at the bottom of the page. (I have tried to achieve this by setting <code>flex-wrap:wrap;</code> but it isn't working.)</p></li>
  <li><p>The two images inside this column need to be placed side by side.</p></li>
  </ol>
  
  <p>However, it just isn't responding. Any ideas why?</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>@charset "UTF-8";
  
  /* CSS Document */
  
  /*Vivid Global Styling*/
  
  html {} body {
    margin: 0px;
    padding: 0px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  li,
  span {
    margin: 0px;
    padding: 0px;
  }
  h1 {
    margin: 0 0 14px 0;
  }
  h2 {
    margin: 0 0 10px 0;
  }
  .wht {
    color: #fff;
  }
  .clear {
    clear: both;
  }
  /*Vivid Page Settings*/
  
  header {
    width: 100%;
    background-color: #fff;
    border-bottom: #000 1px solid;
  }
  .vd-hide {
    display: none;
  }
  .vd-settings-wrapper {
    width: 15%;
    max-width: 200px;
  }
  .vd-user-settings {
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    background-color: #fff;
    float: left;
    margin: 12px 2px 0 21px;
  }
  .vd-currency-selector {
    width: 58px;
    height: 21px;
    border: 1px solid #000;
    background-color: #fff;
    float: left;
    margin: 12px 2px 1px 2px;
  }
  .vd-language-selector {
    width: 58px;
    height: 21px;
    border: 1px solid #000;
    background-color: #fff;
    float: left;
    margin: 3px 2px 0 2px;
  }
  /*Vivid Main Navigation*/
  
  .vd-nav-wrapper {
    width: 75%;
    height: 78px;
    margin: 0 auto;
    text-align: center;
  }
  .vd-nav-wrapper ul {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .vd-nav-wrapper li {
    text-decoration: none;
    list-style: none;
    display: inline-block;
    margin: 25px 20px;
    vertical-align: middle;
  }
  .vd-nav-wrapper a {
    text-decoration: none;
    list-style: none;
    display: inline-block;
    margin: 18px 20px;
    vertical-align: middle;
  }
  .vd-logo-img {
    margin: 0px;
    padding: 0px;
  }
  /*Vivid Checkout Settings*/
  
  .vd-cart-wrapper {
    width: 10%;
    z-index: 10;
  }
  .vd-cart-selector {
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    background-color: #fff;
    margin: -11px 31px 0 2px;
    position: absolute;
    top: 23px;
    right: -9px;
  }
  /*Vivid Main Wrapper*/
  
  .vd-page-container {
    /* width: 100%; */
    margin: 0 auto;
    display: flex;
    /* max-width: 1280px; */
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* justify-content: space-between; */
    flex-direction: row;
  }
  /*Vivid Grid*/
  
  .vd-grid h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Montserrat', sans-serif;
    line-height: 32px;
    color: #fff;
  }
  .vd-grid p,
  span {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height: 17px;
    font-size: 0.85em;
    margin: 0;
    padding: 0;
    color: #fff;
  }
  .vd-grid h1 {
    margin: 0;
    padding: 0;
  }
  .vd-grid h2 {
    font-size: 1.2em;
    margin: 0 0 4px 0;
  }
  .vd-grid h3 {
    margin: 4px 0 4px 0;
  }
  .vd-grid h4 {
    margin: 4px 0 4px 0;
  }
  .vd-grid {
    display: flex;
    /* width: 1262px; */
    width: 98.6%;
    margin: 13px auto;
  }
  .vd-grid-left-col {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    /* float: left; */
    flex-basis: 90%;
    /* width: 980px; */
    /* width: 77.6%; */
    /* float: right; */
    /* flex-direction: row; */
    /* display: -webkit-inline-flex; */
    display: -inline-flex;
    /* flex-wrap: wrap; */
  }
  .vd-grid-right-col {
    height: px;
    /* width: 265px; */
    display: flex;
    flex-direction: column;
    flex-basis: 29%;
    /* width: 26.8%; */
    /* float: right; */
  }
  .vd-grid-main-box {
    /* margin: 10px; */
    width: 100%;
    height: 391px;
    background-color: #000029;
    /* padding: 3.2%; */
    padding: 2%;
  }
  .vd-grid-main-box img {
    width: 100%;
    height: auto;
    position: absolute;
  }
  .vd-grid-sub-box {
    /* margin: 5px; */
    flex-grow: 1;
    width: 30.8%;
    height: 171px;
    background-image: url(../img/granda_hj.jpg);
    background-size: cover;
    background-position: top center;
    background-color: #000029;
    /* padding: 0.9%; */
    /* float: left; */
    /* padding: 0.9%; */
    /* margin: 0 0 1% 0.2%; */
    margin: 0 0;
  }
  .vd-grid-xtra-box {
    width: 100%;
    height: 303px;
    background-image: url(../img/tst_img.jpg);
    background-size: cover;
    background-position: center center;
    background-color: #000029;
    /* padding: 10px 20px; */
  }
  .vd-text-wrap {
    /* width: 100%; */
    /* position: relative; */
    top: 340px;
    left: 0px;
  }
  .vd-margin-top {
    margin-top: 2%;
  }
  .vd-margin-right {
    /*! margin-right:10px; */
    margin-right: 0.5;
    margin-right: 10px;
  }
  .vd-margin-left {
    /*! margin-left:10px; */
    /* margin-left: 0.8%; */
    margin-left: 1%;
  }
  .vd-margin-bottom {
    margin-bottom: 1%;
  }
  /*Vivid Footer*/
  
  .vd-footer {
    display: flex;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height: 16px;
    padding: 0 30px;
    /* padding-bottom: 55px; */
    background-color: #000029;
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .vd-widget-area {
    display: flex;
    /* padding: 15px 0 10px; */
    border-top: 0px solid #e5e5e5;
    /* max-width: 1260px; */
    margin: 0 auto 0px;
  }
  .vd-footer-text {
    display: inline-block;
    vertical-align: top;
    width: 26%;
    padding-right: 60px;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .vd-footer-links {
    display: inline-block;
    vertical-align: top;
    padding: 0 30px 25px 0;
    width: 12%;
    line-height: 22px;
    font-size: 12px;
    color: white;
  }
  .vd-footer-links ul {
    margin: 0;
    padding: 0;
    list-style: outside none;
    display: block;
    vertical-align: top;
  }
  .vd-footer-links li {
    font-size: 12px;
    color: white;
    text-decoration: none;
  }
  .vd-footer-links a {
    font-size: 12px;
    color: #ccc;
    text-decoration: none;
  }
  .vd-footer-links a:hover {
    font-size: 12px;
    color: white;
  }
  .vd-footer-title {
    font-family: 'Montserrat', sans-serif;
  }
  .vd-signup {
    display: inline-block;
    max-width: 305px;
    width: 26%;
    font-size: 12px;
  }
  .vd-sub-footer {
    border-top: 1px solid #e5e5e5;
    padding-top: 25px;
    margin-top: 0px;
    font-size: 0;
    max-width: 1260px;
    margin: 0 auto;
  }
  /*Vivid Payment Icons*/
  
  .vd-payment-icon {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1.2;
    color: #a7a7a7;
  }
  .vd-footer-linklist .vd-social-icon:before {
    font-size: 16px;
    width: 16px;
    text-align: center;
    margin-right: 5px;
    font-family: 'Social Icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .vd-payment-options {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 12px;
    text-decoration: none;
    display: block;
    list-style: outside none;
  }
  .vd-payment-options ul {
    display: block-inline;
    list-style-type: outside none;
  }
  .vd-payment-options li {
    display: block-inline;
    float: right;
    padding: 0 0 0 10px;
    list-style-type: outside none;
  }
  .american-express:before {
    content: "\f001";
  }
  .bitcoin:before {
    content: "\f006";
  }
  .jcb:before {
    content: "\f028";
  }
  .master:before {
    content: "\f02d";
  }
  .paypal:before {
    content: "\f033";
  }
  .visa:before {
    content: "\f045";
  }
  /*Vivid Copyright*/
  
  .vd-copyright-wrapper {
    float: left;
    margin: 0;
    width: 50%;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
  }
  .vd-grid-sub-box vd-margin-right vd-margin-left {
    margin-left: 100px;
  }
  /*Vivid Responsive*/
  
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {}@media screen and (max-width: 928px) {
    .vd-currency-selector {
      display: none;
    }
    .vd-language-selector {
      display: none;
    }
    .vd-grid-right-col {
      flex-wrap: wrap;
    }
    @media screen and (max-width: 490px) {
      .vd-grid-sub-box {
        width: 100%;
      }
      .vd-currency-selector {
        display: none;
      }
      .vd-language-selector {
        display: none;
      }
      .vd-grid-right-col &gt; div {
        width: 100%;
        margin-top: 1%;
        float: none;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="vd-navigation-wrapper"&gt;
      &lt;div class="vd-settings-wrapper"&gt;
        &lt;div class="vd-user-settings"&gt;
        &lt;/div&gt;
        &lt;div class="vd-currency-selector"&gt;
        &lt;/div&gt;
        &lt;div class="vd-language-selector"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="vd-nav-wrapper"&gt;
        &lt;ul&gt;
          &lt;li&gt;Shop&lt;/li&gt;
          &lt;li&gt;About&lt;/li&gt;
          &lt;li class="vd-logo-img"&gt;
            &lt;img src="img/vivid_logo.png" /&gt;
          &lt;/li&gt;
          &lt;li&gt;Lookbook&lt;/li&gt;
          &lt;li&gt;Contact&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="vd-cart-wrapper"&gt;
        &lt;div class="vd-cart-selector"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  
  
  
    &lt;!--Mobile Navigation--&gt;
    &lt;nav class="vd-hide"&gt;
      &lt;div class="menuIcon"&gt;
        &lt;a href="#menuExpand"&gt;Menu&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;a class="nav toggle-menu" href="#"&gt;
          &lt;i&gt;&lt;/i&gt;
          &lt;i&gt;&lt;/i&gt;
          &lt;i&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;h1 class="logo"&gt;&lt;a href="#firstSection"&gt;&lt;img src="img/harva_logo.png"/&gt;&lt;/a&gt;&lt;/h1&gt;
      &lt;ul id="menu"&gt;
        &lt;li data-menuanchor="firstSection"&gt;
          &lt;a href="#firstSection" title="First Section"&gt;First Section&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-menuanchor="secondSection"&gt;
          &lt;a href="#secondSection" title="Second Section"&gt;Second Section&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-menuanchor="thirdSection"&gt;
          &lt;a href="#thirdSection" title="Second Section"&gt;Third Section&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-menuanchor="fourthSection"&gt;
          &lt;a href="#fourthSection" title="Fourth Section"&gt;Fourth Section&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-menuanchor="fifthSection"&gt;
          &lt;a href="#fifthSection" title="First Slide"&gt;First Slide&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-menuanchor="fifthSection/1"&gt;
          &lt;a href="#fifthSection/1" title="Second Slide"&gt;Second Slide&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;!--End Mobile Navigation--&gt;
  
  &lt;div class="vd-page-container"&gt;
    &lt;div class="vd-grid"&gt;
      &lt;div class="vd-grid-left-col"&gt;
        &lt;div class="vd-grid-main-box vd-margin-bottom"&gt;
          &lt;div class="vd-text-wrap"&gt;
            &lt;h1&gt;Header Text&lt;/h1&gt;
            &lt;h2&gt;Secondary Title&lt;/h2&gt;
            &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="vd-grid-sub-box"&gt;
          &lt;h3&gt;Header Text&lt;/h3&gt;
          &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="vd-grid-sub-box vd-margin-right vd-margin-left"&gt;
          &lt;h3&gt;Header Text&lt;/h3&gt;
          &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="vd-grid-sub-box"&gt;
          &lt;h3&gt;Header Text&lt;/h3&gt;
          &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="vd-grid-right-col vd-margin-left"&gt;
        &lt;div class="vd-grid-xtra-box"&gt;
          &lt;h4&gt;Header Text&lt;/h4&gt;
          &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom"&gt;
          &lt;h4&gt;Header Text&lt;/h4&gt;
          &lt;p&gt;Featured Text Here over two lines if needed place here.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;footer class="vd-footer"&gt;
    &lt;div class="vd-widget-area"&gt;
      &lt;div class="vd-footer-text"&gt;
        &lt;h4 class="vd-footer-title"&gt;V I V I D - SHOPIFY THEME&lt;/h4&gt;
        &lt;div class="rte"&gt;V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="vd-footer-links"&gt;
        &lt;h4 class="vd-footer-title"&gt;HELP&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;HELP | FAQ'S&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;RETURNS&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;HOW TO SHOP&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;CONTACT US&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;STOCKISTS&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="vd-footer-links"&gt;
        &lt;h4 class="vd-footer-title"&gt;POLICIES&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;DELIVERY &amp;amp; RETURNS POLICY&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;TERMS &amp;amp; CONDITIONS&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;PRIVACY POLICY&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="" href="#"&gt;SECURITY POLICY&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="vd-footer-links"&gt;
        &lt;h4 class="vd-footer-title"&gt;CONNECT&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="vd-social-icon facebook" href="#" target="_blank"&gt;FACEBOOK&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="vd-social-icon twitter" href="#" target="_blank"&gt;TWITTER&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="vd-social-icon instagram" href="#" target="_blank"&gt;INSTAGRAM&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="vd-social-icon vimeo" href="#" target="_blank"&gt;VIMEO&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="vd-signup"&gt;
        &lt;h4 class="vd-footer-title"&gt;SIGN UP TO OUR NEWSLETTER&lt;/h4&gt;
        &lt;div class="wht"&gt;HTML Block to be added here for embedded email capture forms&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="vd-sub-footer"&gt;
      &lt;ul class="vd-payment-options"&gt;
        &lt;li class="vd-payment-icon american-express"&gt;&lt;/li&gt;
        &lt;li class="vd-payment-icon bitcoin"&gt;&lt;/li&gt;
        &lt;li class="vd-payment-icon jcb"&gt;&lt;/li&gt;
        &lt;li class="vd-payment-icon master"&gt;&lt;/li&gt;
        &lt;li class="vd-payment-icon paypal"&gt;&lt;/li&gt;
        &lt;li class="vd-payment-icon visa"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="vd-copyright-wrapper"&gt;
        &lt;p class="vd-copyright"&gt;Copyright © 2017 V I V I D Themes.&lt;/p&gt;
        &lt;p class="vd-attribution"&gt;"Virtual Visual Merchandising"&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>