As you can see from the attached screenshot, if the first column has more text than the second, it causes a visual glitch.

How do I resolve this in Bootstrap?

**Demo:** <https://jsfiddle.net/oLderkuo/>

[![enter image description here](https://i.stack.imgur.com/fSq68.png)](https://i.stack.imgur.com/fSq68.png)

```
<div class="container">

    <div class="portfolio-gallery row">

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

</div>

```

CSS:

```
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

```