Problems with positioning with columns in Bootstrap 3

I'm having a positioning problem with the bootstrap grids I'm doing a virtual store where the layout has to look like this:

Butwithmycodingitlookslikethis:

Notethatinthisimagethewinesdonotformthethreecolumnsandareonebelowtheotherfollowsmycode:

HTML:

<divclass="container">
    <h1 class="text-center title-category">Os melhores vinhos você encontra aqui</h1>
    <div class="row">
        <div class="col-sm-4 categories">
            <ul class="list-unstyled filter-category">
                <li><a href="#" class="category">Vinho tinto</a></li>
                <li><a href="#" class="category">Vinho branco</a></li>
                <li><a href="#" class="category">Espumante</a></li>
                <li><a href="#" class="category">Vinho do porto</a></li>
            </ul>
        </div>
        <div class="col-sm-8">filtros</div>
        <div class="col-sm-8">
            <ul class="gallery list-unstyled">
                <li class="gallery-list">
                    <img src="images/vinho-gallary.png" class="wine-gallary"/>
                    <!--<div class="shop text-center">
                        <a href="#" class="hover-shop">comprar</a>
                    </div>-->
                    <div class="description">
                        <p class="description-wine">Vinho tinto Touriga</p>
                        <p class="price">R$ 150,00</p>
                    </div>
                </li>
            </ul>

            <ul class="gallery list-unstyled">
                <li class="gallery-list">
                    <img src="images/vinho-gallary.png" class="wine-gallary"/>
                    <div class="shop text-center">
                        <a href="#" class="hover-shop">comprar</a>
                    </div>
                    <div class="description">
                        <p class="description-wine">Vinho tinto Touriga</p>
                        <p class="price">R$ 150,00</p>
                    </div>
                </li>
            </ul>

            <ul class="gallery list-unstyled">
                <li class="gallery-list">
                    <img src="images/vinho-gallary.png" class="wine-gallary"/>
                    <div class="shop text-center">
                        <a href="#" class="hover-shop">comprar</a>
                    </div>
                    <div class="description">
                        <p class="description-wine">Vinho tinto Touriga</p>
                        <p class="price">R$ 150,00</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.title-category{
    font: italic 400 2em @font-family-serif;
}

.categories{
    font-size: 1.5em;


    .filter-category{
        background-color: @lightGray;

        .category{
            padding: 20px 40px;
            width: 100%;
            background-color: @black;
            display: block;
        }

        :hover{
            background-color: @gold;
        }
    }
}

.gallery{
    padding-top: 50px;

    .gallery-list{
        display: table;

        .wine-gallary{
            background-color: @gray;
            padding: 25px 85px;
            width: 100%;
        }

        .hover-shop{
            background-color: @gold;
            padding: 15px;
            width: 100%;
            display: block;
            font-size: 1.2em;
        }

        .description-wine{
            font: italic 400 1.5em @font-family-serif;
        }

        .price{
            color: @gold;
            font-size: 1.2em;
        }
    }
}

Note: I'm using less the page, it's all correct only the part of the wines that is "zuada" is worth remembering that in the mobile version they have to stay one underneath the same one.