Não está funcionando legal quando uso For ao invés de While

Eu tentei mesclar o que foi ensinado na aula com algumas outras partes já discutidas anteriormente.

Ao invés de usar o while, decidi usar o for (teoricamente era pra dar na mesma, certo?). No meu código também tem uma seção para verificar se o valor do chute foi maior ou menor que o valor pensado (que também já foi discutido nas aulas anteriores.

O problema é que quando eu rodo o código, as dicas do chute ser maior ou menor só aparecem depois das tentativas serem esgotadas ou de eu ter acertado (o break entra em ação). Por exemplo, se eu errar 2x e acertar na última tentativa, o esperado seria que a dica "O seu chute foi maior ou menor que o número pensado" aparecesse logo após o chute. Porém essa dica só aparece após o final de tudo (as duas dicas e o Você acertou, tudo de uma vez no final).

Estou fazendo alguma coisa errada ou isso tem a ver com o for?

<meta charset="utf-8">

<script type="text/javascript">
    function pulaLinha(){

        document.write("<br><br>");
    }

    function mostra(frase){

        document.write(frase);
        pulaLinha();
    }

    function sorteia(n){

        return Math.round(Math.random() * n);
    }

    var faixaNumeros = parseInt(prompt("Qual o máximo número entre o qual deve-se adivinhar?"));
    var numeroPensado = sorteia(faixaNumeros);
    console.log(numeroPensado);

    for(var i=3; i>0; i--){
        var chute = parseInt(prompt("Digite o seu chute de 0 a " + faixaNumeros + ". (Você tem mais " + i + " tentativas)"));
            if(chute == numeroPensado){
                mostra("Você acertou!");
                break;
            } else{
                if(chute < numeroPensado){
                    mostra("O número pensado é maior que seu chute.");
                } else{
                    mostra("O número pensado é menor que seu chute.")
                }
            }
        }

    mostra("FIM");
</script>