如何在laravel中显示发送者消息右侧和接收者消息左侧

hello friends i am new in laravel and i work on messages module. i get all messages converstaion between two users.but i want sender messages display to right side and receiver messages left side.

My View Page.

<div class="section-content">
  <?php foreach($data1 as $row){?>
  <div class="row chat">
    <div class="col-md-6">
      <div class="bubble1 me" style="color:black"><p><?php echo $row->message;?></p>
      </div>
    </div>
  </div>
  <div class="row chat">
    <div class="bubble you" style="color:white"><p><?php echo $row->message;?></p></div>
  </div><?php }?> 
</div>

My Controller

$result=DB::table('messages')
                  ->join('user_register','messages.sendermsgid','=','user_register.id')
                  ->where('sendermsgid', $senderid)->where('receivermsgid',$receivermsgid)
                  ->orwhere('sendermsgid',$receivermsgid)->where('receivermsgid',$senderid)
                  ->select('messages.message','messages.sendermsgid','messages.receivermsgid','user_register.first_name as name')
                  ->orderby('messages.sdate','desc')
                  ->get();
 return view('users.messageschat')->with('data1',$result);

i face error like this

Receiver Messages
                       Sender Messages
Receiver Messages
                       Sender Messages
Sender  Messages     
                       Receiver Messages 

I want to Display My chat Like this

   Receiver Messages
                           Sender Messages
   Receiver Messages
                           Sender Messages
   Receiver Messages     
                           Sender Messages
   Receiver Messages 
                           Sender Messages

Add a margin-left css property to each row chat items. I mean div.row or div.chat.

make your backend API like that you can determine weather the message is send by you or you received a message then make two different div with diff class one for sender and other for receiver make css for both like float:left and float: right

Or just change the view and add an col-md-6 to your row

<div class="section-content">
    <?php foreach($data1 as $row){?>
        <div class="row chat">
            <div class="col-md-6"></div>
            <div class="bubble1 me col-md-6" style="color:black"><p><?php echo $row->message;?></p></div>
        </div>
        <div class="row chat">
            <div class="bubble you col-md-6" style="color:white"><p><?php echo $row->message;?></p></div>
            <div class="col-md-6"></div>
        </div>
    <?php }?>
</div>