Nested Q&A in Laravel

I am with a project that handles products that are published by users. Products allow other users to ask questions about the products, and the author of the post can reply. I have the problem in the comments section.

In the comments table it has an id field, user_id (the one that creates the question), parent_id (it would be a field where I store the "answer" and that would be the id of the question in the same table) and the body. There are other fields that would not be interesting to expose. The point is that to display the comments that the publication has, I do $comments = Comment::orderBy('parent_id')->get();. It turns out that if I do that query in the DB, and it returns:

After Laravel does this:

that is, the order that I require does not take it into account and returns me sorted by id... how can I solve this?

@foreach($product->comments as $comment)
            @if($comment->id === $comment->parent_id)

            <li class="media mb-3 pos-relative">
                <a href="#">
                    <img src="/images/users/{{ $comment->user->profile->image }}" alt="{{ $comment->user->name }}" class="d-flex mr-3 img-thumbnail img-fluid" style="width:50px; height:50px; border-radius:50%">
                </a>


                <div class="media-body">
                    <ul class="list-inline blog-meta text-muted">
                        <li class="list-inline-item"><i class="fa fa-user"></i> <a href="#">{{ $comment->user->name }}</a></li>
                        <li class="list-inline-item"><i class="fa fa-calendar"></i> {{ $comment->created_at }}</li>
                    </ul>
                    <p>{{ $comment->body }}</p>
                    @auth
                        @if($product->user_id === Auth::user()->id && $comment->user_id != Auth::user()->id) 
                        <p>
                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#comment{{ $comment->uuid }}" aria-expanded="false" aria-controls="comment{{ $comment->uuid }}">
                                Responder
                            </button>
                        </p>
                        <div class="collapse" id="comment{{ $comment->uuid }}">
                            <div class="card card-body">
                                {!! Form::open(['route' => 'replyProducts']) !!}
                                    <div class="form-group">
                                        {{ Form::text('id', $product->id , ['class' => 'form-control', 'id' => 'id', 'hidden']) }}
                                        {{ Form::text('parent_id', $comment->id , ['class' => 'form-control', 'id' => 'parent_id']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ Form::textarea('body', null, ['class' => 'form-control', 'id' => 'comment', 'rows' => '4', 'onKeyDown' => 'valida_longitud()', 'onkeyup' => 'valida_longitud()', 'onpaste' => 'return false']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ Form::submit ('Responder', ['class' => 'btn btn-success btn-lg float-right']) }}
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    @endif

                    @endauth
                </div>
            </li>
            @else
                <li class="media mb-3 pos-relative ml-5">
                    <a href="#">
                        <img src="/images/users/{{ $comment->user->profile->image }}" alt="{{ $comment->user->name }}" class="d-flex mr-3 img-thumbnail img-fluid" style="width:50px; height:50px; border-radius:50%">
                    </a>
                    <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                            <li class="list-inline-item"><i class="fa fa-user"></i> <a href="#">{{ $comment->user->name }}</a></li>
                            <li class="list-inline-item"><i class="fa fa-calendar"></i> {{ $comment->created_at }}</li>
                        </ul>
                        <p>{{ $comment->body }}</p>
                    </div>
                </li>
            @endif
        @endforeach

inside a foreach first I check if the id of the comment is equal to the parent_id. If they are the same, it is a question. If the comment id differs from the parent_id, it is a response and all I do is indent the response.

Schema::create('comments', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->uuid('uuid')->unique()->nullable()->index();

        $table->unsignedBigInteger('user_id')->nullable();
        $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade')->onUpdate('cascade');

        $table->unsignedBigInteger('parent_id')->nullable();
        $table->foreign('parent_id')->references('id')->on('comments')->onDelete('cascade')->onUpdate('cascade');

        $table->string('body');
        $table->morphs('commentable');
        $table->timestamps();
    });

that is the comments table

the result that the controller sends to the view is fine... I don't understand why it is modified in the view...