Bootstrap 3 nested grid responsive

Question

I am trying to make a nested grid like bellow image can any one help me to get this? I try a lot but failed here is my code pen

body 
{
margin: 0 auto; 
padding: 0; 
font-size: 100%; 
font-family: Arial, Helvetica, sans-serif;
  max-width:1440px
}
.bborder{
	border: 1px solid #000;
}
.cborder {
	border: 1px solid #000;
	height: 150px;
}
.border {
	border: 1px solid #000;
	height: 450px;
}
.aborder {
	border: 1px solid #000;
	height: 300px;
}
.color {
	background: #B5E61D;
}
.color_1 {
	background: #99D9EA;
}
.color_2 {
	background: #B97A57;
}
.color_3 {
	background: #A349A4;
}
.color_4 {
	background: #EFE4B0;
}
.color_5 {
	background: #FFC90E;
}
.color_6 {
	background: #C8BFE7;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12 bborder">
	<div class="row">
	    	<div class="col-md-9 col-lg-9 border">
					<div class="col-md-4 col-lg-4">
						<div class="row">
							<div class="col-md-12 col-lg-12 aborder color_4">
								<div class="row">
								
								</div>
							</div>

						</div>
						<div class="row">
							<div class="col-md-12 col-lg-12 cborder color_4">
								<div class="row">
								
								</div>
							</div>

						</div>
					</div>
					<div class="col-md-5 col-lg-5">

					</div>
			</div>
			<div class="col-md-3 col-lg-3">
				<div class="row">

						<div class="col-md-12 col-lg-12 cborder color_5">

						</div>

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

Answer 1

您可以改用CSS网格进行布局。示例（通过媒体查询更新）：

SELECT prod_id, prod_name
FROM Products
WHERE prod_name LIKE '*## inch teddy bear*';

.grid>div {
  min-height: 200px;
  margin-bottom: .5em;
}

.grid>div:nth-of-type(1) {
  background: lightgrey;
}

.grid>div:nth-of-type(2) {
  background: #FFF200;
}

.grid>div:nth-of-type(3) {
  background: #C50C70;
}

.grid>div:nth-of-type(4) {
  background: #E36357;
}

.grid>div:nth-of-type(5) {
  background: #9DC727;
}

.grid>div:nth-of-type(6) {
  background: #00ACF3;
}

@media (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 200px);
    grid-gap: .5em;
  }
  .grid>div {
    margin-bottom: 0;
  }
  .grid>div:nth-of-type(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .grid>div:nth-of-type(2) {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .grid>div:nth-of-type(3) {
    grid-column: 5 / 6;
    grid-row: 1 / 4;
  }
  .grid>div:nth-of-type(4) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
  .grid>div:nth-of-type(5) {
    grid-column: 4 / 5;
    grid-row: 2 / 4;
  }
  .grid>div:nth-of-type(6) {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
  }
}