Animate.css弄乱了图像位置

Question

对于我的一个项目，我试图在图像上使用animate.css使其从右侧滑入。虽然位置很好，但是当没有animate.css类动画slideInRight＆＃39;时，它会在应用类时搞乱。这是我的意思的图片。当图片位于文本旁边时，图片位于文本下方。

以下是代码：

HTML：

<section class="section section-responsive">
  <div class="row">
    <div class="responsive-text">
      <h3 class="responsive-h3">Mobile Websites</h3>
      <h2 class="responsive-h2">Für eine mobile Welt</h2>
      <p class="responsive-p">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
     </div>
    </div>
    <div class="responsive-img js--wp-3">
     <img src="Resources/img/mockupcut.png" alt="Responsive Webdesign" class="responsive-mockup">
    </div>
  </section>

CSS：

.section-responsive {
    position: relative;
    height: 80vh;
}

.responsive-text {
    width: 50%;
    display: inline-block;
}

.responsive-h3 {
    color: #f52945;
    font-weight: 800;
    font-size: 220%;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.responsive-h2 {
    color: #f52945;
    font-weight: 800;
    font-size: 220%;
    margin: -15px 0 30px 0;
    text-transform: uppercase;
}

.responsive-p {
    font-size: 90%;
    line-height: 145%;
    width: 70%;
}

.responsive-mockup {
    width: 40%;
    float: right;
    display: inline-block;
}

JS：

$('.js--wp-3').waypoint(function(direction) {
            $('.js--wp-3').addClass('animated slideInRight'); 
        }, {
            offset: '100%'
        });