Box Div in wrong order

Question

I have multiple Div Boxes like this below:

<div class="col-sm-4 col-md-4 col-xs-12  text-center">
  <div class="carCard">
    <h2 class="text-center">Box 1</h2>
    <p>
      Conent Here
    </p>
  </div>
</div>

However, if the content <p> get big, the boxes in order get missed up, see example: https://jsfiddle.net/3oq8h3vy/2/

You can see Box 1, Box 2, Box 3 and then send row: Box 5, Box 6 and Box 4.

How to fix this?

are you looking to maintain same height for all boxes or it is fine to be inline with uneven height in two rows — Naga Sai A, Apr 30 '17 at 16:08
@NagaSaiA Both. same height for all boxer and in right order. — I'll-Be-Back, Apr 30 '17 at 16:10

score 1 · Answer 1 · answered Apr 30 '17 at 16:07

1

there is two solution one is you can use same height for carCard class.

and second one is you can wrap up there in a row and another three in other row etc.

Or you can use same height for p tag with in carCard.

answered Apr 30 '17 at 16:07

Obaidul Kader

217
1
7

score 1 · Accepted Answer · answered Apr 30 '17 at 16:10

1

Replace CSS

.carCard {
  border: 3px solid #ebebeb;
  padding-bottom: 20px;
  margin-bottom: 40px;
  height:150px;
  overflow:auto;
  overflow-x:hidden;
}

answered Apr 30 '17 at 16:10

chirag solanki

399
2
8

Box Div in wrong order

2 Answers2