<script src="https://use.fontawesome.com/f2e10c5fef.js"></script>

<div class="span4 atendimento" style="width:22%">
    <span class="titulo cor-secundaria">Atendimento</span>
    <ul>
        <li><i class="fa fa-clock-o" aria-hidden="true"></i><p class="cor-secundaria">HORARIO DE ATENDIMENTO</p></li>
        <li><i class="fa fa-whatsapp" aria-hidden="true"></i><p class="cor-secundaria">SEU TELEFONE PARA CONTATO</p></li>
        <li><i class="fa fa-phone" aria-hidden="true"></i><p class="cor-secundaria">SEU WHATSAPP</p></li>
        <li><i class="fa fa-envelope-o" aria-hidden="true"></i><a class="cor-secundaria" href="[email protected]">[email protected]</a></li>
        <li><i class="fa fa-map-marker" aria-hidden="true"></i><p class="cor-secundaria">SEU ENDEREÇO</p></li>
    </ul>
</div>

<script>
    $(function(){$(".span4.atendimento").insertAfter(".pagamento-selos .span4.selos");})
</script>

<style>
    @media only screen and (min-width: 768px) {
        #rodape .redes-sociais {
            position:relative
        }
    }

    .pagamento-selos .span4.atendimento > ul {
        margin:0
    }

    .pagamento-selos .span4.atendimento > ul > li {
        position:relative;
        line-height:25px;
        margin-bottom:3px
    }

    .pagamento-selos .span4.atendimento > ul > li i {
        width:20px;
        text-align:center;
        height:20px;
        line-height:20px;
        position:absolute;
        top:0;
        left:0
    }

    .pagamento-selos .span4.atendimento > ul > li a,.pagamento-selos .span4.atendimento > ul > li p {
        margin:0;
        display:inline-block;
        line-height:20px;
        text-indent:25px;
        vertical-align:top
    }

    body.pagina-carrinho .span4.atendimento,
    body.pagina-carrinho.carrinho-checkout .span4.atendimento,
    body.pagina-pedido-finalizado .span4.atendimento {
        display: none
    }
</style>