如何使用bootstrapp将2 div标签右移？

Question

如何使用引导程序在右侧筛选诊断和销售订单明细

代码：

info.html

<div id="patient-info-container">
    <div class="row">
        <div class="col-12">

            <p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i> Ordering Doctor</strong><br />
                <small>Phone:</small><br />
                <small>Fax:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <small>NPI:</small><br />
                <small>Address:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <small>TIN:</small><br />

            </p>

            <p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i>Insurance Info</strong><br />
                <small>Payor Name:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<small>Payor Address:</small><br />
                <small>Policy Number:</small>&nbsp&nbsp&nbsp&nbsp&nbsp <small>Branch:</small><br />
                <small>Phone Number:</small>&nbsp&nbsp&nbsp&nbsp <small>NPI:</small><br />
                <small>Fax Number:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <small>TIN:</small><br />
            </p>s

            <p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i>Diagnosis</strong><br />
                <small>DX 1:</small>&nbsp&nbsp&nbsp&nbsp <small>DX 4:</small><br />
                <small>DX 2:</small>&nbsp&nbsp&nbsp&nbsp&nbsp <small>DX 5:</small><br />
                <small>DX 3:</small>&nbsp&nbsp&nbsp&nbsp&nbsp <small>DX 6:</small><br />
            </p>

            <p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i>Sales Order Detail:</strong><br />
                <small>SO Status:</small><br />
                <small>WIP State:</small><br />
                <small>Assigned To:</small><br />
            </p>

        </div>
    </div>
</div>

我想在内容下方使用引导程序类移到右侧：

<p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i>Diagnosis</strong><br />
                <small>DX 1:</small>&nbsp&nbsp&nbsp&nbsp <small>DX 4:</small><br />
                <small>DX 2:</small>&nbsp&nbsp&nbsp&nbsp&nbsp <small>DX 5:</small><br />
                <small>DX 3:</small>&nbsp&nbsp&nbsp&nbsp&nbsp <small>DX 6:</small><br />
            </p>

            <p class="font-size-xs">
                <strong><i class="far fa-user-md text-info"></i>Sales Order Detail:</strong><br />
                <small>SO Status:</small><br />
                <small>WIP State:</small><br />
                <small>Assigned To:</small><br />
            </p>

参考：

enter image description here

我指的是链接：https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Answer 1

首先，您可以通过多种方式执行此操作，引导程序足够灵活，可以提出不同的解决方案。这是我的。