Misaligned CSS image

Question

By placing an image in the upper right corner on my page, the image that is lower on the left side misaligned and went down.

Image below before placing the images in the upper right:

Image after placing image in the upper right:

HMTL:

<div class="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;

}

Answer 1

It is that its image "Shipping" is outside the division of the side menu, tries to put it in and create a division for the T-shirt images as content. In this image is a basis of how it would be more or less.

Answer 2

To better understand it. In your division where the navigation content is:

<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>

Place the Shipping image inside it, because it is in last option in your Html, so the contents of T-shirts and Talz images will leave it unmade.

<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>
        <img src="imagens/shipping.jpg" alt="iamgem embaixo do ordenar" class="imagem_ordena">
    </div>
</div>