Bootstrap grid mess

Question

Hello, good afternoon, would have some way to fix the col-Md where it was positioned without change?

I used to do it this way:

<div class="col-md-12">
  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>
</div>

But now I need it to be this way:

<div class="col-md-12">
  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>
</div>

Because the appearance of the products is automatic and there is no way to add a new col-Md-12 to delimit the space.

I’d like it to be all right: http://prntscr.com/l1e8ql

But it is enough to have a size difference in the boxes or to close one that goes out of place: http://prntscr.com/l1e8z4

This goes for Faq questions as well: http://prntscr.com/l1e92q

Answer 1

Friend, from what I understand of your answer it seems that’s what you need. But in your project there must be something else that is breaking the original Bootstrap grid, even with a col inside the other, without row the example below does not present the same problem as your.

Run "Full Page" to see the responsiveness:

[class^="col-"] {
  box-sizing: border-box;
  border: 1px solid black;
}

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

	
	<div class="col-md-12">
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
<div class="col-md-4">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		<img src="https://placecage.com/100/100" alt="">
	</div>
</div>

---

If you want them all col have the height of the biggest brother vc of the row you can use display:flex in the father.

Would that way:

.col-md-12 {
  display: flex;
  flex-wrap: wrap;
}
[class^="col-"] {
  box-sizing: border-box;
  border: 1px solid black;
}

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

<div class="col-md-12">
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
</div>