Bootstrap布局图片居右显示异常，如何实现自适应控制？

问题 #

使用Bootstrap布局时，图片置于左侧可正常自适应，但调整至右侧后显示效果异常，该如何修复？

原代码 #

HTML

<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>

CSS

.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;
}

修复方案 #

1. 修正核心问题：补全布局结构+控制列排序 #

原右侧布局缺少图片列，且存在重复ID（两个区块都用id="about"），需调整如下：

• 给第二个区块修改唯一ID（如about-right），避免DOM冲突
• 补全图片列，用Bootstrap的order-*类控制不同屏幕下的列顺序：
  • 文本列加order-lg-1 order-2：大屏幕（lg及以上）文本居左，小屏幕自动排到图片下方
  • 图片列加order-lg-2 order-1：大屏幕图片居右，小屏幕自动排到文本上方
• 给row添加align-items-center，让文本和图片垂直居中，保持与左侧布局一致的视觉效果

2. 适配样式：调整文本边框位置 #

原desc类的border-left是针对文本居右的场景，当文本居左时，需将边框改到右侧，新增样式类即可。

完整修复代码 #

HTML

<div class="about" id="about">
    <div class="container">
        <h1 class="text-center">About Me</h1>
        <div class="row align-items-center">
            <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-right">
    <div class="container">
        <h1 class="text-center">About Me</h1>
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-8 col-sm-12 desc right-border">
                <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 class="col-lg-4 col-md-4 col-sm-12">
                <img src="img/120.png" class="img-fluid">
            </div>
        </div>
    </div>
</div>

CSS

.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.right-border{
    border-left: none;
    border-right:4px solid #10828C;
}
.about .desc h3{
    color: #10828C;
}
.about .desc p{
    line-height:2;
    color:#888;
}

内容的提问来源于stack exchange，提问作者kingsop