Swipe columns with bootstrap
<p>I am trying to find out how to make a swipe-content-thingy using bootstrap.</p>

<p>The concept is shown below</p>

<p><a href="https://i.stack.imgur.com/0snoB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0snoB.png" alt="enter image description here"></a></p>

<p>On mobile the green box should be visible in the view and when I slide either left or right, the boxes should be pushed in the direction the user slided ....</p>

<p>I can't seem to find the right approac. I have installed TouchSwipe, but I am kinda stuck.</p>

<p>Here is my current HTML</p>

<pre><code>&lt;div id="neighbourHoodSchools" class="stat-content-block"&gt;
  &lt;div class="row eq-height text-center swipe-container"&gt;
    &lt;div class="swipe-button-left"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="swipe-button-right"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="col-md-4 swipe-in"&gt;
      &lt;div class="swipe-content swipe-left left-out"&gt;
        &lt;div class="section-inner"&gt;
          &lt;h3&gt;Nærmeste&lt;br /&gt;børnehave&lt;/h3&gt;
          &lt;span id="kinderGardenName" class="dynamic-input-line name"&gt;Børnehaven Thorsens Allé&lt;/span&gt;
          &lt;span id="kinderGardenDistance" class="dynamic-input-line large section-color"&gt;300 m&lt;/span&gt;
          &lt;span id="kinderGardenIcon" class="report-data-icon"&gt;&lt;i class="icon-boernehave"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;span id="kinderGardenRoute" class="report-data-route text-uppercase"&gt;&lt;a href="#"&gt;Se rute&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 background-light"&gt;
      &lt;div class="section-inner"&gt;
        &lt;h3&gt;Nærmeste&lt;br /&gt;skole&lt;/h3&gt;
        &lt;span id="schoolName" class="dynamic-input-line name"&gt;Gl. Hasseris Skole&lt;/span&gt;
        &lt;span id="schoolDistance" class="dynamic-input-line large section-color"&gt;670 m&lt;/span&gt;
        &lt;span id="schoolIcon" class="report-data-icon"&gt;&lt;i class="icon-skole"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span id="schoolRoute" class="report-data-route text-uppercase"&gt;&lt;a href="#"&gt;Se rute&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 swipe-in right-out"&gt;
      &lt;div class="swipe-content swipe-in-right"&gt;
        &lt;div class="section-inner"&gt;
          &lt;h3&gt;Nærmeste&lt;br /&gt;gymnasium&lt;/h3&gt;
          &lt;span id="gymnasiumName" class="dynamic-input-line name"&gt;Hasseris Gymnasium&lt;/span&gt;
          &lt;span id="gymnasiumDistance" class="dynamic-input-line large section-color"&gt;1,8 km&lt;/span&gt;
          &lt;span id="gymnasiumIcon" class="report-data-icon"&gt;&lt;i class="icon-gymnasium"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;span id="gymnasiumRoute" class="report-data-route text-uppercase"&gt;&lt;a href="#"&gt;Se rute&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>