Prevent line breaking (encavalating) in col-Md bootstrap

Question

I am doing a grid that will appear some products, up to 3 per line, in mobile 1 per line, the problem is that the height varies and from there on the monitors it 'encavala' one over the other.

Solution would be to put a height: 270px fixed, but for mobile layout I can not.

My HTML

 <div class="container ">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 grid">1 - teste de linha Gigante e sempre vai dar algum problema
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" width="350" alt="" class="img-responsive img-thumbnail">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">2 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt=""  width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">3 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">4 - teste</div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">5 - teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    1 - teste de linha Gigante e sempre vai dar algum problema
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" class="img-responsive img-thumbnail">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    2 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    3 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
            </div>
    </div>

Example in the fiddle https://fiddle.jshell.net/dorathoto/mt0rb3kj/3/ In fiddle it is difficult to visualize the big screen, to see how it curls.

I tried to do through: But I think I must have confused something, because it should work.

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        max-height: 146px !important;
    }
}

@media (min-width: 992px)
{
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    max-height: 250px !important;
}
}

But to no avail.

Update [18/05/2016] The use of <div class="row"> every 12 items. But if I have an option that varies according to the device, that is to screen -md- would be every 3 items one row, but for canvas -sm- every 2 items and for -xs- 1 item per Row.

Below an image that illustrates my problem

Answer 1

Your grid count is wrong, even if you use the .row, the .col-*-4 should have only 3 Divs in one .row

To know if the quantity always disappears .cols the total MUST always be 12, ie:

• If you’re just gonna use .col-*-4 then it will be 3, because 4+4+4 = 12
• Use .col-*-6 will be 6+6=12
• You can also do 6+3+3=12 for example.

In your case you have eight Divs with .col-*-4, then 8x4=32, which means the result is different from 12 and that is why the problem or other problems occurs (which you probably tried to solve with CSS and ended up tying up in the gambiarra that is now generating this problem).

Recommend to read the documentation http://getbootstrap.com/css/#grid before use, because although easy to understand many things in bootstrap are not only intuitive to use, as this in English I’ll put some important snippets of GRID here:

• The .rows shall be placed within a .container (fixed width) or .container-fluid (full width) for proper alignment and padding (if it does not have this will affect the margins).

• Use the .rows to create horizontal groups of columns.

• Content should be placed inside columns (.col-*-*) and columns should always be daughters of .row and no other element.

• The .col-* generate spacing between them. Spacing is compensated in the .row through negative margin.

• Grid columns (.col-*) are created to have specifically available 12 columns that you can extend. For example, three identical columns would use three .col-xs-4.

• If more than 12 columns are placed within a single row, each group of additional columns will break to a new row.

• The classes .col- apply the width:; for screens with a size greater than or equal to the minimum size (defined in the medias-queries) and if the device has the smallest screen, it will replace by the class .col- defined for smaller screens. Therefore any class should be used .col-md-* for an element will not only affect your style on devices of the screen size chosen (Md, lg, Sm, etc.), but also affect larger screens if a class .col-lg-* not present (this is an example).

The right thing would be something like:

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>