Bootstrap响应式设计：结合2种不同的设计

Question

我正在创建portfolio。我无法思考，所以我已经有了这两个设计

<div id="midscreen">
    <div id="header" class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 ">
                <div class="row" id="avator-side">
                    <div class="col-sm-12 col-md-6 col-lg-6 d-flex justify-content-center h-100">
                        <div id="description" class="speech row justify-content-center align-self-center form-inline">
                                <span class="blinking-caret">
                                    <typewriter></typewriter>
                                </span>
                        </div>
                    </div>
                    <div id="bg-container" class="col-sm-12 col-md-6 col-lg-6 ">
                        <avatar></avatar>
                    </div>
                    <table></table>
                </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                    <workscenery></workscenery>
            </div>
        </div>

    </div>
</div>

用于XL屏幕

<div class="container-fluid" id="bigscreen">
    <div class="row">
            <workscenery></workscenery>
            <div id="avatar-container">
                <div id="description" class="speech row justify-content-center align-self-center form-inline">
                        <span class="blinking-caret">
                            <typewriter></typewriter>
                        </span>
                </div>
                <avatar></avatar>
            </div>
    </div>
</div>

既然我重复了两次代码并使用媒体查询显示它们，我就要做一些解决方法，以便SVG看起来正常。

如何将上述代码合二为一，以避免重复头像标记