So I have been working on getting the swatches functionality from the rwd theme to my custom theme. Everything is working except that the swatches appear in reverse order on the category listing page. 

[![swatches in the correct order on the product page][1]][1]


[![incorect order on the product listing][2]][2]


  [1]: https://i.sstatic.net/AfkTl.jpg
  [2]: https://i.sstatic.net/HfZ93.png

Here is the generated code from the product page:

    <ul id="configurable_swatch_codculoare" class="configurable-swatch-list clearfix">
                                            <li class="option-01" id="option68">
                    <a href="javascript:void(0)" name="01" id="swatch68" class="swatch-link swatch-link-141 has-image" title="01" style="height: 23px; width: 23px;">
                <span class="swatch-label" style="height: 21px; width: 21px; line-height: 21px;">
                                    <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/21x21/product/a/f/afryka_01-swatch_4.jpg" alt="01" width="21" height="21">
                                 </span>
                        <span class="x">X</span>
                    </a>
                </li>
                                            <li class="option-02" id="option67">
                    <a href="javascript:void(0)" name="02" id="swatch67" class="swatch-link swatch-link-141 has-image" title="02" style="height: 23px; width: 23px;">
                <span class="swatch-label" style="height: 21px; width: 21px; line-height: 21px;">
                                    <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/21x21/product/a/f/afryka_02-swatch_4.jpg" alt="02" width="21" height="21">
                                 </span>
                        <span class="x">X</span>
                    </a>
                </li>
                                            <li class="option-03" id="option66">
                    <a href="javascript:void(0)" name="03" id="swatch66" class="swatch-link swatch-link-141 has-image" title="03" style="height: 23px; width: 23px;">
                <span class="swatch-label" style="height: 21px; width: 21px; line-height: 21px;">
                                    <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/21x21/product/a/f/afryka_03_1.jpg" alt="03" width="21" height="21">
                                 </span>
                        <span class="x">X</span>
                    </a>
                </li>
                                            <li class="option-04" id="option65">
                    <a href="javascript:void(0)" name="04" id="swatch65" class="swatch-link swatch-link-141 has-image" title="04" style="height: 23px; width: 23px;">
                <span class="swatch-label" style="height: 21px; width: 21px; line-height: 21px;">
                                    <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/21x21/product/a/f/afryka_04-swatch_4.jpg" alt="04" width="21" height="21">
                                 </span>
                        <span class="x">X</span>
                    </a>
                </li>
                    </ul>

An the code from the category listing:

    <ul class="configurable-swatch-list configurable-swatch-codculoare clearfix">
                <li class="option-04" data-product-id="1040" data-option-label="04">
        <a href="javascript:void(0)" name="04" class="swatch-link swatch-link-141 has-image" title="04" style="height: 17px; width: 17px;">
            <span class="swatch-label" style="height: 15px; width: 15px; line-height: 15px;">
                            <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/15x15/product/a/f/afryka_04-swatch_4.jpg" alt="04" width="15" height="15">
                         </span>
                    </a>
    </li>
                <li class="option-03" data-product-id="1040" data-option-label="03">
        <a href="javascript:void(0)" name="03" class="swatch-link swatch-link-141 has-image" title="03" style="height: 17px; width: 17px;">
            <span class="swatch-label" style="height: 15px; width: 15px; line-height: 15px;">
                            <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/15x15/product/a/f/afryka_03_1.jpg" alt="03" width="15" height="15">
                         </span>
                    </a>
    </li>
                <li class="option-02" data-product-id="1040" data-option-label="02">
        <a href="javascript:void(0)" name="02" class="swatch-link swatch-link-141 has-image" title="02" style="height: 17px; width: 17px;">
            <span class="swatch-label" style="height: 15px; width: 15px; line-height: 15px;">
                            <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/15x15/product/a/f/afryka_02-swatch_4.jpg" alt="02" width="15" height="15">
                         </span>
                    </a>
    </li>
                <li class="option-01" data-product-id="1040" data-option-label="01">
        <a href="javascript:void(0)" name="01" class="swatch-link swatch-link-141 has-image" title="01" style="height: 17px; width: 17px;">
            <span class="swatch-label" style="height: 15px; width: 15px; line-height: 15px;">
                            <img src="https://www.vanzari-piele.ro/media/catalog/swatches/1/15x15/product/a/f/afryka_01-swatch_4.jpg" alt="01" width="15" height="15">
                         </span>
                    </a>
    </li>
    </ul>

Question is: why are swatches in reverse order on the listing page and how to fix this issue?