<div class="section section-twoside fp-auto-height-responsive bg-white bg-bright" data-section="features" id="features">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper twoside padding-bottom">

    <!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->
    <!-- begin of item -->
    <div class="item row">
      <!-- begin of illustration content -->
      <div class="col-12 col-md-6 col-lg-7 order-md-2">
        <!-- content -->
        <div class="section-content center-vh anim">
          <!-- illustartion -->
          <div class="images text-center">
            <div class="img-frame-normal img-black frame-small sr-down-td3">
              <div class="img-1">
                <img class="img" alt="Image" src="img/phone.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of illustration content -->

      <!-- begin of text content -->
      <div class="col-12 col-md-6 col-lg-5 order-md-1 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <!-- title and description -->
          <div class="title-desc text-right">
            <h2 class="display-4 display-title sr-up-td2">Nice
              <br>Feature
            </h2>
            <div class="row justify-content-end sr-up-td3">
              <div class="col-12 col-md-9 mb-3">
                <div>
                  <h4 class="border-primary text-primary">Mobile ready</h4>
                  <p>This is a placeholder text. Replace it with your awesome call to action text. Build stunning landing page
                    easily with this template
                  </p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- end of text content -->
    </div>
    <!-- end of item -->

    <!-- begin of item -->
    <div class="item row">
      <!-- begin of illustration content -->
      <div class="col-12 col-md-6 col-lg-7 order-md-1">
        <!-- content -->
        <div class="section-content center-vh anim">
          <!-- illustartion -->
          <div class="images text-center">
            <div class="img-frame-normal img-black sr-down-td3">
              <div class="img-1">
                <img class="img" alt="Image" src="img/laptop.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of illustration content -->

      <!-- begin of text content -->
      <div class="col-12 col-md-6 col-lg-5 order-md-2 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <!-- title and description -->
          <div class="title-desc text-left">
            <h2 class="display-4 display-title sr-up-td2">Smart
              <br>Design</h2>
            <div class="row justify-content-start">
              <div class="col-12 col-md-9 mb-3 sr-up-td3">
                <div>
                  <h4 class="border-primary text-primary">Multi-browser</h4>
                  <p>This is a placeholder text. Replace it with your awesome call to action text. Build stunning landing page
                    easily with this template
                  </p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- end of text content -->
    </div>
    <!-- end of item -->
  </div>
  <!-- End of section wrapper -->
</div>