bootstrap Content finalized - html

Question

When I use the bootstrap to content layout, if the picture is on the left, it seems to be adaptive. If I put the picture on the right, it is different from the original. How can I control it?
<div class="about" id="about">
<div class="container">
<h1 class="text-center">About Me</h1>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="img/120.png" class="img-fluid">
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>
</div>
<div class="about" id="about">
<div class="container">
<h1 class="text-center">About Me</h1>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 ">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>
</div>
As you can see here it effects images.
.about{
margin: 4em 0;
padding: 1em;
position: relative;
}
.about h1{
color:#F97300;
margin: 2em;
}
.about img{
height: 100%;
width: 100%;
border-radius: 50%
}
.about span{
display: block;
color: #888;
position: absolute;
left: 115px;
}
.about .desc{
padding: 2em;
border-left:4px solid #10828C;
}
.about .desc h3{
color: #10828C;
}
.about .desc p{
line-height:2;
color:#888;
}
If I put the picture on the right, it is different from the original - how can I control this behaviour?

Answer 1

<div class="about" id="about">
<div class="container">
<h1 class="text-center">About Me</h1>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png"
class="img-fluid">
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>
</div>
<div class="about" id="about">
<div class="container">
<h1 class="text-center">About Me</h1>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 order-1">
<img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png"
class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 ">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>
</div>
Try this code
You can mange the layout through order option.

Answer 2

Change the div classes like：
<div class="col-lg-8 col-md-8 col-sm-12 desc">
to
<div class="col-lg-4 col-md-4 col-sm-12 ">
its ok.