How do I populate chat message from bottom to top

How do I populate chat message from top to bottom like a normal chatbox. not from bottom to top.

Chat .js

function ChatWidget(pusher) {
    var self = this;

    this.pusher = pusher;
    this.channelName = 'chat';

    this.chatContainer = $('.chat-widget');
    this.messageContainer = $('.chat-messages');
    this.chatEntry = $('.chat-entry');
    this.chatName = $('.chat-name');

    this.channel = this.pusher.subscribe(this.channelName);

    this._populateLatestMessages();

    this.channel.bind('chat_message', function(data) {
        self._displayMessage(data);
    });

    this.chatEntry.on('keydown', function(e) {
        if (!e.shiftKey && e.keyCode === 13) {
            e.preventDefault();

            self._sendMessage({
                message: self.chatEntry.val()
            });

            self.chatEntry.val('');
        }
    });
};

ChatWidget.prototype._displayMessage = function (message) {
    var nameHtml = $('<span />', {
        text: message.name + ':'
    });

    this.messageContainer.prepend($('<div />', {
        class: 'chat-message',
        text: message.message
    }).prepend(nameHtml));
};

ChatWidget.prototype._populateLatestMessages = function () {
    var self = this;

    $.ajax({
        url: 'latest',
        type: 'get',

        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var message = data[i];
                self._displayMessage({
                    name: message.name,
                    message: message.message,
                });

            }
        },
        error: function (data) {
        }
    });
};

ChatWidget.prototype._sendMessage = function (message) {
    $.ajax({
        url: 'chat',
        type: 'post',
        data: {message: message, _token: token},
        error: function () {
            //
        }
    });
};

Chat.blade.php

@section('content')
<section class="content">

    <div class="chat-messages" id="chat-messagges">
    </div>
    <textarea class="chat-entry" placeholder="Type a message and hit enter"></textarea>

</section>



@endsection

chat.css

body,
input,
textarea {
    font: 1em "Helvetica", sans-serif;
}

.chat-widget {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 300px;
    background-color: #edeff0;
    font-size: .9em;
}

.chat-messages {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    line-height: 1.2em;
    height: 550px;
    max-height: 550px;
    overflow-y: scroll;
    position : relative; bottom:0;
}

.chat-message span {
    color: #7b8b8e;
    margin-right: 5px;
}

.chat-message {
    padding: 10px;
}

.chat-message:nth-child(even) {
    background-color: #f9f9f9;
}

.chat-widget,
.chat-messages {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.chat-name,
.chat-entry {
    box-sizing: border-box;
    padding: 10px;
    margin: 0 10px 10px;
    width: calc(100% - 20px);
    border: none;
}

.chat-entry {
    height: 100px;
    resize: none;
}