<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-12">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-6">Colum</div>
            <div class="col-md-6">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col">
                Column
            </div>
            <div class="col">
                Column
            </div>
            <div class="col">
                Column
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-2">Colum</div>
            <div class="col-md-2">Colum</div>
            <div class="col-md-2">Colum</div>
            <div class="col-md-2">Colum</div>
            <div class="col-md-2">Colum</div>
            <div class="col-md-2">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-4">Colum</div>
            <div class="col-md-8">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-8">Colum</div>
            <div class="col-md-4">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Colum</div>
            <div class="col-md-9">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-9">Colum</div>
            <div class="col-md-3">Colum</div>
        </div>        
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Colum</div>
            <div class="col-md-6">Colum</div>
            <div class="col-md-3">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-6">Colum</div>
            <div class="col-md-6">Colum</div>
            <div class="col-md-6">Colum</div>
            <div class="col-md-6">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
            <div class="col-md-3">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
            <div class="col-md-4">Colum</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col">
                1 of 2
            </div>
            <div class="col">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-6">
                2 of 3 (wider)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-5">
                2 of 3 (wider)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
        </div>
        <div class="row">
            <div class="col-8">col-8</div>
            <div class="col-4">col-4</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">col-sm-8</div>
            <div class="col-sm-4">col-sm-4</div>
        </div>
        <div class="row">
            <div class="col-sm">col-sm</div>
            <div class="col-sm">col-sm</div>
            <div class="col-sm">col-sm</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
            <div class="col-6">.col-6</div>
            <div class="col-6">.col-6</div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container px-4">
        <div class="row gx-5">
            <div class="col">
                <div class="p-3 border bg-light">Custom column padding</div>
            </div>
            <div class="col">
                <div class="p-3 border bg-light">Custom column padding</div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="container overflow-hidden">
        <div class="row gx-5">
            <div class="col">
                <div class="p-3 border bg-light">Custom column padding</div>
            </div>
            <div class="col">
                <div class="p-3 border bg-light">Custom column padding</div>
            </div>
        </div>
    </div>
</li>
