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>