JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>
  Current width:
  <p class="currentwidth">

  </p>
</p>
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

CSS

.container {
  max-height: 200px;
}

.first {
  width: 200px;
  height: 200px;
  background: lightblue;
  position: relative;
  float: left;
}

.second {
  width: 200px;
  height: 200px;
  background: gray;
  position: relative;
  float: left;
}

JavaScript

$(window).on("resize", function() {
  $(".currentwidth").text($(window).width());
  if ($(window).width() < 820) {
    $(".first").insertAfter($(".second"));
  } else {
    $(".first").insertBefore($(".second"));
  }

})