MailChimp custom template problems with drag and drop blocks

Question

I am creating a custom MailChimp template but having issues when using the mc:repeatable element. I have it on a wrapped around a block of code and in the editor when creating a campaign, it works fine, I can spawn a new version of the parent block and move it around in the template, but when I preview, or send the email, the child block that was spawned from the parent sits below it's parent and not where I have placed it following spawning it from the parent block... Something seems to be wrong? (Heavily simplified) Code example below... Anyone any ideas on the fix???

<!-- BLOCK A -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_A">
<p>This is block A</p>
</div>
<!-- end of BLOCK A -->

<!-- BLOCK B -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_B">
<p>This is block B</p>
</div>
<!-- end of BLOCK B -->

So, when creating a new campaign, if I duplicate BLOCK A and position the duplicated BLOCK A below BLOCK B - in the preview within the campaign editor it looks fine, but when I click to view it into PREVIEW MODE, or send a PREVIEW EMAIL - the duplicated BLOCK A sits above BLOCK B and below its original spawned parent BLOCK A element...

Any ideas? Are the HTML COMMENTS (e.g. < !-- --> ) The issue perhaps?

Answer 1

Very late, but I was able to find success using this:

<table mc:repeatable="content" mc:variant="variant_1">
  <tr>
    <td mc:edit="section_1">
      Variant 1 Content
    </td>
  </tr>

</table>
<table mc:repeatable="content" mc:variant="variant_2">
  <tr>
    <td mc:edit="section_2">
      Variant 2 Content
    </td>
  </tr>
</table>

<table mc:repeatable="content" mc:variant="variant_3">
  <tr>
    <td mc:edit="section_3">
      Variant 3 Content
    </td>
  </tr>
</table>

More in depth explanation can be found here: Create Editable Content Areas with MailChimp’s Template Language