将iframe移到另一个HTML列中

我需要一些帮助来将iFrame部分（其中包含一个googlemaps链接）移动到HTML中已经存在的另一列旁边的列中。根据所附的屏幕截图，地图必须显示在名称/电子邮件/主题/消息部分旁边

我的守则如下：

<section class="padding bg-grey" id="contact">
        <div class="container">
            <h2 class="section-title text-center">Contact Us</h2>
            <p class="section-lead text-center text-muted">Send us your inquiry, we will help you and reply as soon as possible</p>
            <div class="section-body">              
                <div class="row col-spacing">
                    <div class="col-12 col-md-5">
                        <p class="contact-text">You can send us something like a question or project, we are open 09:00 to 17:00.</p>
                        <ul class="contact-icon">
                            <li><i class="ion ion-ios-telephone"></i> <div>+27823300387</div></li>
                            <li><i class="ion ion-ios-email"></i> <div>vhs2digital@kodinger.com</div></li>
                        </ul>
                        <iframe src="https://maps.google.com/maps?width=720&amp;height=200&amp;hl=en&amp;q=21%20Taurus%20Road%2C%20Sundowner+(VHS2Digital)&amp;ie=UTF8&amp;t=&amp;z=19&amp;iwloc=B&amp;output=embed" style="border:none;" class="maps"></iframe>
                    </div>
                    <div class="col-12 col-md-7">
                        <form class="contact row" id="contact-form">
                            <div class="form-group col-6">
                                <input type="text" class="form-control" placeholder="Name" name="name" required="">
                            </div>
                            <div class="form-group col-6">
                                <input type="email" class="form-control" placeholder="Email" name="email" required="">
                            </div>
                            <div class="form-group col-12">
                                <input type="text" class="form-control" placeholder="Subject" name="subject" required="">
                            </div>
                            <div class="form-group col-12">
                                <textarea class="form-control" placeholder="Message" name="message" required=""></textarea>
                            </div>
                            <div class="form-group col-12 mt-2">
                                <button class="btn btn-primary">
                                    Send Message
                                </button>
                            </div>                              
                        </form>                         
                    </div>
                </div>
            </div>
        </div>
    </section>

联系我们
将您的询价发送给我们，我们将帮助您并尽快回复
您可以向我们发送问题或项目，我们的开放时间为09:00至17:00

+27823300387
vhs2digital@kodinger.com

发送消息

---

您需要另一个列元素。现在，在7个单位的列（共12列）后面的第二行中有一个间隙

...               

您需要另一个列元素。现在，在7个单位的列（共12列）后面的第二行中有一个间隙

...               

不清楚你在问什么。为什么不能将iframe元素剪切并粘贴到所需的位置？您所说的“移动”是什么意思？你试图解决这个问题的是什么？你到底被困在哪里？我下面的解决方案忽略了一个事实，即你的布局有问题。您应该在一行中看到这两列，因为它们总共有12个单元。您可以先查看引导文档并修复它，但不清楚您在问什么。为什么不能将iframe元素剪切并粘贴到所需的位置？您所说的“移动”是什么意思？你试图解决这个问题的是什么？你到底被困在哪里？我下面的解决方案忽略了一个事实，即你的布局有问题。您应该在一行中看到这两列，因为它们总共有12个单元。你可以先检查引导文档并修复它。我猜我首先要做的是创建一个表单/ div部分，输入字段右边的空白部分的大小（名称、电子邮件、主题和消息）。一旦我做对了，我可以把地图加进去。我发现，无论我在哪里添加或节，它都会将其添加到其他元素的下方，而我似乎无法将其定位到“”节的右侧。我可能需要通过读取引导文档来锐化。我想我首先要做的是创建一个表单/ div部分，输入字段右边的空白部分的大小（名称、电子邮件、主题和消息）。一旦我做对了，我可以把地图加进去。我发现，无论我在哪里添加或节，它都会将其添加到其他元素的下方，而我似乎无法将其定位到“”节的右侧。我可能需要通过阅读引导文档来提高自己的能力。

<div class="row col-spacing">
    <div class="col-12 col-md-7">
        <form class="contact row" id="contact-form">
            ...               
        </form>                         
    </div>

    <div class="col-12 col-md-5"><!-- NEW COLUMN WITH WIDTH TOTALLING 12 -->
        <iframe src="https://maps..." style="border:none;" class="maps"></iframe>
    </div>
</div>