用大型设备中的图像填补引导 3 网格系统的空白

如何解决用大型设备中的图像填补引导 3 网格系统的空白

我的部分有两列（col-6）。 问题是这两列之间的差距太大了，我决定通过在它们之间放置一个狭窄的图像来填补这个差距。这是我的代码：

 <div id="Skills">
        <div class="container-fluid">
            <div class="row">
                <div class="section-2">
                    <div class="col-md-6 col-sm-6 col-xs-12 section-2-left">
                        <ul>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
</ul>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 section-2-right">
                        <ul>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
    <li class="fade-in-skills slide-in-skills">something</li>
</ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

<style>
    #Skills {
        background: rgba(168,198,222,.2);
        margin: 100px 50px 0;
        border-radius: 300px 15px 300px 15px;
    }
    
    .section-2 ul {
        list-style: none;
        text-align: center;
    }
    
    .section-2 ul li {
        margin: 77px auto 0;
        opacity: 0;
        font-size: 1.6rem;
        color: #000
    }
    
    .section-2-right,.section-2-left ul li:last-child {
        margin-bottom: 77px;
    }
</style>

我正在使用引导程序 3。所以有一个很大的差距（在大型设备中这两列的内容之间大​​约有 400 像素），我想在它们中间添加一个图像，仅适用于大型设备。我只是想知道是否有办法将图像放在这两个 col-6 列的中间。所以请避免任何其他建议。我该怎么做？ 您能提供的任何帮助将不胜感激。