CSS misaligned image

When I put an image in the upper right corner of my page, the image on the bottom left side misaligned and went down.

Image below before placing the images in the upper right:

Imageafterplacingimageinupperright:

HMTL:

<divclass="container-fluid">
<div class="row">
    <div class="col-sm-3">
        <div class="conteudo_ordenar">
            <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
            <p class="ordena"><span class="caret"></span> Marca</p>
            <p class="ordena"><span class="caret"></span> Tamanho</p>
            <p class="ordena"><span class="caret"></span> Cor</p>
            <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
        </div>
    </div>
    <div class="col-sm-9 col-md-9">
        <h3 class="titulo">CAMISETAS</h3>
    </div>
    <div class="col-sm-3 col-md-3">
        <div class="linha">
            <img src="imagens/camisa_1.JPG" alt="camisa1" class="imagem_teste" />
            <br />
            <a href="#">
                <p class="descricao_produto">Calça Jeans Armani</p>
                <h4 class="preco"> A partir de R$134,99</h4>
                <button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 
            </a>
        </div>
    </div>
    <div class="col-sm-3 col-md-3">
        <div class="linha">
            <img src="imagens/camisa_2.JPG" alt="camisa2" class="imagem_teste" />
            <br />
            <a href="#">
                <p class="descricao_produto">Calça Jeans Armani</p>
                <h4 class="preco"> A partir de R$134,99</h4>
                <button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 
            </a>
        </div>
    </div>
    <div class="col-sm-3 col-md-3">
        <div class="linha">
            <img src="imagens/camisa_3.JPG" alt="camisa3" class="imagem_teste" />
            <br />
            <a href="#">
                <p class="descricao_produto">Calça Jeans Armani</p>
                <h4 class="preco"> A partir de R$134,99</h4>
                <button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 
            </a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-3">
        <img src="imagens/shipping.jpg" alt="iamgem embaixo do ordenar" class="imagem_ordena">
    </div>
</div>

CSS

.saiba_mais{

background-color: #00008B;
 color: white;
 padding: 16px;
 font-size: 13px;
 border: none;
width: 100%;
margin-top: 20px;

 }

 .linha {
  border: 1px solid #fff;
 height: 390px;
 display: inline-block;
  width: 99%;
 }

.imagem_teste{

 width: 90%;
}

.descricao_produto{
color:black;
 font-weight: 700;
}
 .preco{
  color:red;
 }

.linha a{
display: none;
}


 .linha:hover a{
  display: inline-block;
  width: 100%;
  }

.linha:hover{
 border-color: #E0E0DA;

 }

.imagem_ordena{
width: 100%;

}

.conteudo_ordenar{

    border:1px solid #E0E0DA;
    border-top: 3px solid #00008B;
    border-bottom: 3px solid #00008B;
    height: 300px;


    overflow: auto; /* isto para evitar o conteúdo transborde o "container", por causa da altura limite de "200px height" definido acima */
}

.titulo_ordenar{
background-color: #00008B;
color:White;
text-align: center;
 margin: 0; /* Aplica um reset à margem automática do título atribuída pelo Navegador */
 height: 50px;


}

.ordena{
outline: 1px solid #E0E0DA;
 padding: 12px;

}