JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-wrap">
  <div class="wrap-left">
    <div class="wrap-one">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    </div>
    <div class="wrap-two">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
    </div>
  </div>
  <div class="wrap-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

CSS

p {
  margin: 10px;
}
body {
  display: flex;
}

.my-wrap {
  width: 90%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-left {
  flex: 0 0 75%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
  .wrap-one {
    flex-grow: 1;
    background-color: tomato;
  }
  .wrap-two {
    flex-grow: 1;
    background-color: deepskyblue;
  }
  
.wrap-right {
  flex: 0 0 25%;
  min-width: 0;
  background-color: greenyellow;
}

/*  for mobile layout  */
.my-wrap > .wrap-one {
  flex: 0 0 100%;
  order: -1;
}
.mobileview .wrap-right {
  background-color: green;
}

JavaScript

(function(d, w, timeout) {

  /* custom variables */
  var flexcontainer = '.wrap-left',
    flexitem = '.wrap-one',
    minwidth = 600,             /* if null, then when viewport is portrait */
    classname = 'mobileview';
    
  /* here happens the magic */
  function resizeing() {
    if ((minwidth && (minwidth < w.innerWidth)) ||
        (!minwidth && (w.innerHeight < w.innerWidth))) {
      if (d.body.classList.contains(classname)) {      
        /* move it back inside the main flexcontainer */
        d.body.classList.remove(classname)
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].appendChild(qS(flexitem, fca[i].parentNode))
        }
      }      
    } else {
      if (!(d.body.classList.contains(classname))) {
        /* move it outside the main flexcontainer */
        d.body.classList.add(classname);
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].parentNode.appendChild(qS(flexitem, fca[i]))
        }
      }
    }
  }
  
  /* run at page load init resize */
  w.addEventListener("load", function() {
    resizeing();
  }, false);
  
  /* grab when viewport resize */
  w.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        resizeing();
      }, 66);
    }
  }, false);
  
  /* helper variables */
  var qSA = function(s, el) {
      return (el) ? el.querySelectorAll(s) :
        d.querySelectorAll(s)
    },
    qS = function(s, el) {
      return (el) ? el.querySelector(s) :
        d.querySelector(s)
    };
}(document, window));