Как исправить пространство после двух столбцов в ряду, третий начинается в конце второго, создавая большое пространство?

Question

У меня есть 2 столбца внутри строки и столбец за пределами первого ряда. строка Col-1 Col-2 Col-3 Проблема заключается в том, что col-3 начинается в конце col-1, поэтому в режиме рабочего стола существует разрыв между col-1 и col-3, и этот промежуток продолжает увеличиваться, как и col-2. Как сделать так, чтобы col-3 не начинался после высоты col-2, и, следовательно, между col-1 и col-3 нет большого пространства? Я попытался поместить все столбцы в ряд и установить порядок-первый и порядок-последний

Вот как это выглядит:

|col-1  ||col-2|
|       ||     |
 ------- |     |
         |     |
---------
col-3
---------

Вот как это должно выглядеть:

|col-1  ||col-2|
|       ||     |
 ------- |     |
col-3    |     |
---------|     |

Я попытался поместить все столбцы в ряд и установить порядок первый и последний заказ

<div class="row">
  <div class="col-md-8">
   col-1
  </div>
  <div class="col-md-4"> 
     col-2
  </div>
  <div class="col-md-8 pull-left">
       col-3
  </div>
</div>

Ожидаемый результат должен состоять в том, что после col-1 с col-2 нет пробела. Поэтому col-3 не должен начинаться после высоты col-2.

Answer 1

EDIT

Вот базовый пример YouTube с использованием flexbox. Вы можете очистить CSS.

CodePen

https://codepen.io/matrixme/pen/wbqvZb

HTML

    <div class="container">
        <div class="col--one">
            <div class="row video">
                <h2>Video</h2>
            </div>
            <div class="row forum">
                <h2>Forum</h2>
                <ul>
                    <li class="thread"></li>
                    <li class="thread"></li>
                    <li class="thread"></li>
                </ul>
            </div>
        </div>
        <div class="col--two">
            <h2>Related</h2>
            <ul>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
            </ul>
        </div>
    </div>

CSS

body {
  width: 100vw;
  margin: 0;
  top: 0;
  height: auto;
  background-color: #323232;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
}

h2 {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  width: 70%;
  background-color: #F2F2F2;
}

.col--one {
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: #F2F2F2;
}

.col--two {
  position: relative;
  width: 30%;
  height: auto;
  background-color: #F2F2F2;
  border-left: 1px solid #CCCCCC;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.video {
  position: relative;
  height: 350px;
  background-color: #EEEEEE;
}

.forum {
  flex-wrap: wrap;
  align-content: flex-start;
  height: 500px;
  background-color: #dddddd;
  position: relative;
}

ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0;
}

.thread {
  position: relative;
  height: 50px;
  background-color: #ffffff;
  width: 90%;
}


.thumbnail {
  position: relative;
  height: 200px;
  background-color: #ffffff;
  width: 80%;
  margin-bottom: 20px;
}

Answer 2

Я бы посоветовал вам использовать bootstrap flex css для достижения этой цели, поскольку это намного проще. Я добавил тестовый код. Надеюсь, это поможет вашей проблеме

HTML

<div class="flex-row">
  <div class="flex-column">
    <div class="col-md-8 red">
      Column 1
    </div>
    <div class="col-md-8 red">
      Column 2
    </div>
  </div>
  <div class="col-md-4 green">
  Column 3
  </div>
</div>

CSS

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.red {
  background: red;
  padding: 10px;
}

.green {
  background: green;
  padding: 10px;
}

JS Fiddle link: https://jsfiddle.net/SJ_KIllshot/pqtxL9bs/

Answer 3

.content {
  background: #999;
  border: 1px solid red;
}

.h50 {
  height: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row eq-height">
    <div class="col-8">
      <div class="h-50 content">Atul</div>
      <div class="h-50 content">Rajput</div>
    </div>
    <div class="col-4">
      <div class="content h-100">Kumar</div>
    </div>  
  </div>
</div>

Для этого не нужно писать так много CSS, просто измените структуру HTML, и небольшой CSS поможет вам.