Flipping Panels

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- Vertical Flip Card -->
      <div id="card-1" class="card card-md">
        <div class="other-front demo-background-3">
          <div class="overlay dark--6"></div>
          <div class="card-content">
            <h4>Front Content</h4>
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="other-back demo-background-4">
          <div class="overlay dark--6"></div>
          <div class="card-content">
            <h4>Back Content</h4>
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <h4 class="m-t-15">Vertical Custom</h4>
      <p class="m-t-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <hr>
      <h6 class="show-more m-b-40">See more features &rarr;</h6>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 m-t-30">
      <!-- card-xs -->
      <div class="card card-xs">
        <div class="front bg-dark">
          <div class="card-content">
            <h4>Geniux</h4>
          </div>
        </div>
        <div class="back bg-primary">
          <div class="card-content">
            <p>Powerful &amp; smartly coded</p>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 m-t-30">
      <!-- card-sm -->
      <div class="card card-sm">
        <div class="front bg-dark">
          <div class="card-content">
            <span><i class="icon-genius icon-sm" aria-hidden="true"></i></span>
            <h4>Geniux Multipurpose</h4>
          </div>
        </div>
        <div class="back bg-primary">
          <div class="card-content">
           <i class="icon-heart icon-sm" aria-hidden="true"></i>
            <p>Made With Love For Creatives</p>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 m-t-30">
      <!-- card-md -->
      <div class="card card-md">
        <div class="front bg-dark">
          <div class="card-content">
            <span><i class="icon-tools-2 icon-sm" aria-hidden="true"></i></span>
            <h4>Easy to Customize</h4>
          </div>
        </div>
        <div class="back bg-primary">
          <div class="card-content">
            <i class="icon-chat icon-sm" aria-hidden="true"></i>
            <h4>Free Support</h4>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 m-t-30">
      <!-- card-lg -->
      <div id="card-3" class="card card-lg">
        <div class="other-front demo-background-5">
          <div class="overlay dark--6"></div>
          <div class="card-content">
            <span><i class="icon-genius icon-sm" aria-hidden="true"></i></span>
            <h4>Geniux Multipurpose</h4>
          </div>
        </div>
        <div class="other-back demo-background-6">
          <div class="overlay dark--6"></div>
          <div class="card-content">
            <i class="icon-heart icon-sm" aria-hidden="true"></i>
            <p>Made With Love For Creatives</p>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Owl Flipping Carousel -->
      <div id="owlSliderFlip" class="owl-flip owl-carousel owl-theme">
        <!-- Start item 1 -->
        <div class="item">
          <!-- flip-panel-md -->
          <div class="card card-md">
            <div class="front bg-dark">
              <div class="card-content">
                <span><i class="icon-tools-2 icon-sm" aria-hidden="true"></i></span>
                <h4>Easy to Customize</h4>
              </div>
            </div>
            <div class="back bg-primary">
              <div class="card-content">
                <i class="icon-chat icon-sm" aria-hidden="true"></i>
                <h4>Free Support</h4>
              </div>
            </div>
          </div>
        </div>
        <!-- End item 1 -->

        <!-- Start item 2 -->
        <div class="item">
          <!-- flip-panel-md -->
          <div class="card card-md">
            <div class="front bg-dark">
              <div class="card-content">
                <span><i class="icon-puzzle icon-sm" aria-hidden="true"></i></span>
                <h4>Block Based</h4>
              </div>
            </div>
            <div class="back bg-primary">
              <div class="card-content">
                <i class="icon-expand icon-sm" aria-hidden="true"></i>
                <h4>100% Responsive</h4>
              </div>
            </div>
          </div>
        </div>
        <!-- End item 2 -->

        <!-- Start item 3 -->
        <div class="item">
          <!-- flip-panel-md -->
          <div class="card card-md">
            <div class="front bg-dark">
              <div class="card-content">
                <span><i class="icon-strategy icon-sm" aria-hidden="true"></i></span>
                <h4>Rich of Features</h4>
              </div>
            </div>
            <div class="back bg-primary">
              <div class="card-content">
                <i class="icon-genius icon-sm" aria-hidden="true"></i>
                <h4>Powerful &amp; Flexible</h4>
              </div>
            </div>
          </div>
        </div>
        <!-- End item 3 -->

        <!-- Start item 4 -->
        <div class="item">
          <!-- flip-panel-md -->
          <div class="card card-md">
            <div class="front bg-dark">
              <div class="card-content">
                <span><i class="icon-focus icon-sm" aria-hidden="true"></i></span>
                <h4>Smartly Coded</h4>
              </div>
            </div>
            <div class="back bg-primary">
              <div class="card-content">
                <i class="icon-mobile icon-sm" aria-hidden="true"></i>
                <h4>Retina Ready</h4>
              </div>
            </div>
          </div>
        </div>
        <!-- End item 4 -->

      </div>
      <!-- /Owl Flipping Carousel -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->