无法使用引导程序实现自定义网格布局

Question

所以我已经进行了大约一个月的引导，所以我的HTML可能有点混乱。问题的背景是我的任务要求我创建一个自定义的光滑轮播，以实现如下所示的UI：

使用我当前的代码，这是我能够实现的：

这是到目前为止我所取得的成就的html：

.slider-left {
  display: flex;
  align-items: center;
  p {
    font-size: 16px;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
  }
}

.slider-middle {
  display: flex;
  align-items: center;
  word-break: break-word;
  h1 {
    font-weight: bold;
    color: blue;
  }
  h2 {
    text-transform: uppercase;
    font-style: italic;
    font-size: 16px;
    font-weight: normal;
  }
}

.v-center {
  width: 500px;
  height: 1000px;
  display: flex;
  align-items: center;
}

.slider-image {
  width: 100%;
}

.slider-right {
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <!-- Left most text -->
    <div class="col-lg-1 slider-left text-right">
      <div class="container center-align">
        <p>Publication</p>
      </div>
    </div>
    <!-- Middle Text -->
    <div class="col-md-4 slider-middle center-align">
      <div class="container">
        <h2>title2</h2>
        <h1>title1</h1>
        <p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
        <a></a>
      </div>
    </div>
    <!-- Carousel Image -->
    <div class="col-md-7 slider-right">
      <img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
    </div>
  </div>
  <div class="row">
    <div class="col-5 slider-nav">
      <p>navigation</p>
    </div>
  </div>
</div>

我需要使用引导程序来实现任何类型的ui设计，因为我的主管说这有助于提高网站的响应速度。在这里发生的是，整个容器一次又一次地移动一个类似的容器。请让我知道该怎么做，任何解释都将对您有所帮助。除此之外，如果有人知道如何在该导航栏中插入自定义按钮和自定义分页功能，我会很感激，尽管我对此并未进行过多研究。 干杯：）

Answer 1

你的意思是这样吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div class="col-sm-4" style="background:#f2f2f2;">
        Publication
      </div>
      <div class="col-sm-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12" style="background:red;">navigation</div>
    </div>

  </div>

  <div class="col-md-6 col-sm-12" style="background:#999;">
    Image
  </div>
</div>
</div>