Making Two Different Rows In Bootstrap Have Same-height Elements

I asked a similar question that I'll go delete because this one specifically focuses on my true issue: making them the same height. I have two different rows in bootstrap, one with

Solution 1:

Well you need to add 4th item then with class col-sm-4 portfolio-item dontwantpadding with extra class ie. leftShifted. Apply same class to 2nd and 3rd column so you'll have col-sm-4 portfolio-item dontwantpadding leftShifted.
Your markup will look:

               <div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/ALS.jpg" class="tri-Up img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/kickinit.jpg" class="tri-Down img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/MarshMad.jpg" class="tri-Up img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/kickinit.jpg" class="tri-Down img-responsive" alt="">
                    </a>
                </div>   

Then you need to shift your 2nd, 3rd and 4th element with negative margin, like so:

.col-sm-4.portfolio-item.dontwantpadding.leftShifted{
   margin-left: -130px;
}   

Obviously you need to adjust your margins between rows.
Hope this help

Solution 2:

@Robjez I got it to work! I ended up using the below css to shift the positions of the portfolio-items in. Both rows got corrected.

.portfolio-item:first-child {
    position: relative;
    left: 15%;
}

.portfolio-item:last-child {
    position: relative;
    left: -15%;
}