Я хочу правильно разделить div для моего контента

Question

На первом изображении я хочу, чтобы этот тип контента сначала заголовок, затем описание, но на моей странице он не отображался должным образом. На изображении ниже показана моя страница div

Я хочу показать мой div на первом изображении

Мой код:

<div class="row">
      <div class="col-sm-7 bannervideo" style="margin-left:15px">
      <iframe oncontextmenu="return false" class="video_container" style="width:100%;height:400px;" src="<?php echo $videoDetail[0]['video_links']?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
      <h1 class="vc_custom_heading dividefirstline" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:20px;font-weight:600;line-height:26px;word-break: break-all;"><?php echo $videoDetail[0]['course_title']?>
      </h1>
       <p style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:15px;line-height:26px;font-weight:400" class="secondline"><?php echo substr($videoDetail[0]['video_description'],0,100);?></p>
      </div>
      <div class="col-sm-4 bannervideo">
         <b>Up next</b>
         <div class="row">
            <div class="col-sm-6 pointer relvideo">
               <iframe width="1280" height="150" src="https://www.youtube.com/embed/R2PuVo2U5ak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="col-sm-3">
               <p>Here Comes Title</p>
            </div>
            <div class="col-sm-3">
               <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
         </div>
         <br><br>
      </div>
   </div>

Answer 1

Ваш заголовок и описание должны быть в одном столбце.

   <div class="row">
      <div class="col-sm-7 bannervideo" style="margin-left:15px">
         <iframe oncontextmenu="return false" class="video_container" style="width:100%;height:400px;" src="<?php echo $videoDetail[0]['video_links']?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
         <h1 class="vc_custom_heading dividefirstline" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:20px;font-weight:600;line-height:26px;word-break: break-all;"><?php echo $videoDetail[0]['course_title']?></h1>
         <p style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:15px;line-height:26px;font-weight:400" class="secondline"><?php echo substr($videoDetail[0]['video_description'],0,100);?></p>
      </div>
      <div class="col-sm-5 bannervideo">
         <b>Up next</b>
         <div class="container">
            <div class="row">
               <div class="col-sm-6 pointer relvideo">
                  <iframe width="1280" height="150" src="https://www.youtube.com/embed/R2PuVo2U5ak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
               </div>
               <div class="col-sm-6">
                  <h2>Here Comes Title</h2>
                  <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
               </div>
            </div>
         </div>
      </div>
   </div>

Answer 2

Вы используете col-sm-3 для заголовка и описания, которые располагаются рядом друг с другом (в столбцах). Замените

<div class="col-sm-3">
  <p>Here Comes Title</p>
</div>
<div class="col-sm-3">
  <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>

на

<div class="col-sm-3">
  <p>Here Comes Title</p>
  <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>

, и все должно работать нормально.