Как мне сложить две строки друг над другом, используя Bootstrap?

Question

Итак, я пытаюсь создать страницу, на которой есть 3 элемента div, содержащие разные вещи, такие как текст и т. Д. И я хочу использовать Bootstrap, чтобы она также была удобна для мобильных устройств.

Но я не могупохоже, все правильно, используя систему сетки Bootstrap, потому что я не знаю, как сложить две строки друг на друга.

Вот идея, я хочу расположить два элемента div друг над другом налевая сторона занимает только 3 или 4 из 12 столбцов, а затем имеет большой div в середине экрана.

Синяя частьесть т. д. frontSection

body {
    background: red;
}

.frontSection {
    position: relative;
    height: 100vh;
    background: #3498db;
}


.myRow {
    border: red dotted 3px;
    height: 100vh;
}

.myCol {
    border: greenyellow dotted 3px;
    width: 100px;
    height: 100px;
    background: #2ecc71;
    display: inline-block;
}

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
        <div class="frontSection">

            <div class="container-fluid">
                <div class="row align-items-center flex-fill myRow">
                    <div class="col-3 myCol">
                        
                        <div class="col-3 myCol">

                        </div>
                        
                        <div class="col-3 myCol">

                        </div>

                    </div>
                    
                    <div class="col-9 myCol">

                    </div>
                </div>
            </div>

Answer 1

Пожалуйста, попробуйте это и скажите мне, если я получу ответ на ваш вопрос

body {
    background: red;
}

.frontSection {
    position: relative;
    height: 100vh;
    background: #3498db;
}


.myRow {
    border: red dotted 3px;
    height: 100vh;
}

.myCol {
    border: greenyellow dotted 3px;
    width: 100px;
    height: 100px;
    background: #2ecc71;
  display: flex;
  margin: 5px;
  
}
.myCol--right {
    height: 150px;
  }

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
        <div class="frontSection">

            <div class="container-fluid">
                <div class="row align-items-end flex-fill myRow">
                    <div class="col-3 ">  
                             <div class="row">
                                  <div class="col-12 myCol">
                                  </div>                        
                                  <div class="col-12 myCol">
                                  </div>
                             </div>
                    </div>
                    
                    <div class="col-2 offset-1 align-items-baseline myCol myCol--right">

                    </div>
                </div>
            </div>

Answer 2

Попробуйте это:

JSfiddle

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="frontSection">

  <div class="container-fluid">
    <div class="row align-items-center flex-fill myRow">
      <div class="col-3 myCol">
        <div class="row">
          <div class="col-md-3 col-xs-3 myCol">

          </div>

          <div class="col-md-3 col-xs-3 myCol">

          </div>
        </div>


      </div>

      <div class="col-9 myCol">

      </div>
    </div>
  </div>

style.css

body {
  background: red;
}

.frontSection {
  position: relative;
  height: 100vh;
}


.myRow {
  border: red dotted 3px;
  height: 100vh;
}

.myCol {
  border: greenyellow dotted 3px;
  width: 100px;
  height: 100px;
  background: #2ecc71;
  display: inline-block;
}