在桌面视图中遇到文本问题

Question

我在桌面和移动视图中遇到了一些问题。我有两个cols互相内联，col-**-6。在移动视图中，元素的位置是完美的。但在桌面视图中，文本位于背景图像的左上角。当我将桌面视图中的文本放置到正确的位置时，它会使响应视图变得混乱。什么是最简单的方法来实现我想要的？

以下是桌面视图：

以下是响应式视图：

HTML：

            <div id="top-area" class="video-bg">

                <div class="col-md-6">
                    <div class="video">
                     <?php include ('video.php'); ?> 
                    </div>
                </div>

                <div class="col-md-6">  
                    <div class="top-slider">
                        <?php include ('slider.php'); ?>    
                    </div>
                </div>

            </div>


         <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>

            <div class="item">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p> 
            </div>

            <div class="item">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>

            <div class="item">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
          </div>

        </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

CSS：

/* Top Area */

#top-area {
  min-height: 29em;
  height: auto;
  width: auto;
}

#top-area,
.video-bg {
  background: url("../img/video-bg-left.png") no-repeat left bottom, url("../img/video-bg-right.png") no-repeat right bottom;
}


/* Slider */

#top-area .top-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

#myCarousel {
  display: inline-block;
}

.carousel-inner .item p {
  color: #fff;
  font-family: 'Myriad Pro';
  font-size: 30px;
  width: 12em;
}

.carousel-control.left,
.carousel-control.right {
  background: none !important;
}


/* Video */

#top-area,
.video-bg {
  background: url("../img/video-bg-left.png") no-repeat left bottom, url("../img/video-bg-right.png") no-repeat right bottom;
}