bootstrap 4 using float-right got vertical issues - html

Question

I have comments section on my template, I use w-75 float-right but other column got pull to my comment side.
here my template code.
<div class="col-md-12 mb-3">
....
<!-- comments with no parrent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<!-- comments with parrent -->
<div class="card mb-3 w-75 float-right">
....
</div>
<br>
</div>
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
I wan't like this

Answer 1

Instead of
<div class="card mb-3 w-75 float-right">
Set the left margin to auto, this will push this div element all the way to the right and leave the area to its left clear.
Like this:
<div class='card mb-3 w-75 ml-auto">

Answer 2

You'll want to add .row classes to force a new line, and ensure that each row has exactly 12 columns. To adhere to this, you'll want to remove your w-75 class, and change the parent to col-md-7 in conjunction with offset-md-5 (this totals 12). This allows your card to be offset on desktop screens (with no elements forcing their way in on the left) and stack correctly on mobile screens.
This can be seen in the following (click Run code snippet and then Full page to see the offset):
body {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12 mb-3">
....
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<!-- comments with no parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 offset-md-5">
<!-- comments with parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<br>
</div>
</div>
<div class="row">
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
</div>