Create different z-index grid divisions?

Question

It is possible to create grid division on a different z index ?

Let’s say I have a row and a column as follows:

<div class="row">
 <div col-md-6>

 </div>
 <div col-md-6>

 </div>
</div>

And behind these columns I have another division of columns for other elements that are behind the first:

 <div col-md-4>

 </div>
 <div col-md-4>

 </div>
 <div col-md-4>

 </div>

Sample image:

Answer 1

Here’s an example, no extra CSS, it’s all Boostrap classes, like position-absolut, d-flex, m-0 and p-0

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container-fluid d-flex w-100 position-relative m-0 p-0 align-items-center">
  <div class="row w-100 m-0">
    <div class="border col-4 p-5 bg-danger">Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
    <div class="border col-4 p-5 bg-danger">2</div>
    <div class="border col-4 p-5 bg-danger">3</div>
  </div>
  <div class="row position-absolute border w-100 m-0">
    <div class="border col-6 p-2 bg-primary">1</div>
    <div class="border col-6 p-2 bg-primary">2</div>
  </div>
</div>

---

Color-only

If you only need a background with 3 colors, without the need for a container to place content I think the coolest would be to make a linear-gradiente three-colour.

Take the example, I put in the .row a class .bg with the gradient at the bottom, and within that .row has two col-6

.bg {
	background-image: linear-gradient(to right, #f0f 0%, #f0f 33.33%, #0f0 33.33%, #0f0 66.66%, #00f 66.66%);
}

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container-fluid">
	<div class="row bg py-5">
		<div class="col-6 border bg-primary">1</div>
		<div class="col-6 border bg-primary">2</div>
	</div>
</div>