All you have to do is add the page_cms/container_ui.html to a looping element.
{% include "page_cms/container_ui.html" %}
You can also choose directly the order by adding the advance version
{% include "page_cms/container_ui_advance.html" %}
To add drag and drop functionality to containers we two classes,
.pc_dd_container
.pc_dd_element
The container class must be the direct parent of the element.
With in the element you must have the include for container_ui.html
{% include "page_cms/container_ui.html" %}
or just add
<span class="remove_container" data-hide="true" data-container="{{the page id}}"></span>
A full example would look like this,
<div
data-slug="first_container"
data-type="container"
class="pc_dd_container"
>
{% for container in first_container.containers %}{% with container.data as data %}
<div class="pc_dd_element" id="first_container{{data.conatiner.pk}}">
Your looping content in here...
{% include "page_cms/container_ui.html" %}
</div>
{% endwith %}{% endfor %}
</div>