<h1>Only working in Latest Chrome (not Edge, Firefox or IE)</h1>
<div id="container">

  <div class="box column1 order1">
    <h2>1.1</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>

  <div class="box column1 order4">
    <h2>1.2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>

  <div class="box column1 order7">
    <h2>1.3</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    </p>
  </div>

  <div class="box column1 order10">
    <h2>1.4</h2>
    <p>
      Lorem ipsum dolor sit amet,
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>

  <!-- end column 1 although there is no specific wrapper for the column. The columnstart class will start the new column-->

  <div class="box column2 columnstart order2">
    <h2>2.1</h2>
    <p>
      Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>
  <div class="box column2 order5">
    <h2>2.2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>
  <div class="box column2 order8">
    <h2>2.3</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="box column2 order11">
    <h2>2.4</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>
  <!-- end column 2 although there is no specific wrapper for each column -->
  <div class="box column3 columnstart order3">
    <h2>3.1</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>
  <div class="box column3 order6">
    <h2>3.2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>

  <div class="box column3 order9">
    <h2>3.3</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="box column3 order12">
    <h2>3.4</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.
    </p>
  </div>

  <!-- end column3 although there is no specific wrapper for each column -->

</div>

<!-- end container -->
<footer>
  <p>Footer content goes here</p>
</footer>

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: #f9f9f9;
  font: 100% / 162% BlinkMacSystemFont, -apple-system, "Segoe UI", roboto,
    helvetica, arial, sans-serif;
}
h1 {
  font-size: 1.25em;
  color: #444;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#container {
  max-width: 1180px;
  padding: 10px;
  margin: 2em auto;
  border: 1px solid #999;
  background-color: #f9f9f9;
  column-count: 3;
}

.box {
  padding: 1em;
  margin: 0 0 10px;
  border: 1px solid #999;
  background-color: #efefff;
  box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.3);
  break-inside: avoid;
}
.box:nth-child(odd) {
  background: red;
}
.columnstart {
  break-before: column;
} /* the magic */

@media (max-width: 800px) {
  #container {
    column-count: 1;
    display: flex;
    flex-direction: column;
  }

  .columnstart {
    margin: 0 0 10px;
  }
  .order1{order:1}
  .order2{order:2}
  .order3{order:3}
  .order4{order:4}
  .order5{order:5}
  .order6{order:6}
  .order7{order:7}
  .order8{order:8}
  .order9{order:9}
  .order10{order:10}
  .order11{order:11}
  .order12{order:12}
}