Messaging on the bootstrap grid

Navigation
1

Hello, good afternoon, would you have any way to fix the col-md where it was positioned without any change?

I used to do this in the past: 

<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 you can not add a new col-md-12 to delimit the space.

I would like it to be all right like this: link

However, it is enough to have a size difference in the box or to close the one that leaves the place: link

This applies to the faq questions too: link

    
asked by anonymous 02.10.2018 / 21:04

1 answer

0

Friend I understood from your answer, it seems that this is what you need. But in your project you should have something else that is breaking Bootstrap's original grid, because even with col inside the other, without row , the example below does not present the same problem as yours.

Run under "All Page" to see 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 all col to have the height of the largest brother in the row you can use display:flex in the parent.

It would look like this: 

.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>
    
02.10.2018 / 21:16
Bug in listview ordering Difficulty implementing chessboard [closed]