JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class='container row'>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
  <article class='col-xs-12 col-sm-12 col-md-6'>
    <div class="container-box"></div>
  </article>
</div>

CSS

html,
body {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

    @media (min-width: 970px) {
      .container {
        margin: 2em 0;
        overflow: auto;
        height: 100%;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -moz-column-width: 50%;
	      -moz-column-fill: auto;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -webkit-column-width: 50%;
      	-webkit-column-fill: auto;
        column-count: 2;
        column-gap: 10px;
        column-width: 50%;
	      column-fill: auto;
      }
      article{
        break-inside: avoid-column;
        -webkit-column-break-inside: avoid;
      }
    }

.container article {
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
}

.container article:nth-child(even) {
  width: 100%;
  max-width: 568px;
  height: 150px;
  display: inline-block;
  padding-right: 17px;
}

.container article:nth-child(odd) {
  width: 100%;
  max-width: 568px;
  height: 100px;
  padding-left: 17px;
}

.container-box {
  background-color: #000;
  width: 100%;
  height: 100%;
}