Sort products by category (in parent category view)

I have a quite unique problem.

I have a shop where there are multiple categories in a setup like this

Collection
.... Shorts (products: small 16 - RED and small 20 - BLUE)
.... Dress (products: blue: 16 , Green 19)

If I open Collection in the shop I get the items like this

Blue 16
Green 19
small 16 - RED
small 20 - BLUE

I want my output to be like this:

small 16 - RED
small 20 - BLUE
Blue 16
Green 19

How can i get this results? I'm sorry i haven't provided any code, as i have no idea how i should achieve this

1 create observer on catalog_block_product_list_collection event

    <events>
        <catalog_block_product_list_collection>
            <observers>
                <namespace_module>
                    <class> namespace_module/observer</class>
                    <method>collectionList</method>
                </namespace_module >
            </observers>
        </catalog_block_product_list_collection>
    </events>

2 create class Namespace_Module_Model_Observer

class Namespace_Module_Model_Observer
{
    public function collectionList($observer)
    {
        /** @var Mage_Catalog_Model_Category $currentCategory */
        $currentCategory = Mage::registry('current_category');

        $children = Mage::getResourceModel('catalog/category')->getChildrenIds($currentCategory);
        if (!$children) {
            return $this;
        }
        $children = implode(',', $children);
        /** @var Mage_Catalog_Model_Resource_Product_Collection $collection */
        $collection = $observer->getCollection();

        $attr = $this->_getAttribute('name');

        $collection->getSelect()
            ->join(
                array('c' => $this->_getResource()->getTableName('catalog_category_product')),
                "c.product_id = e.entity_id AND c.category_id IN ($children)",
                array('child_category_id' => 'category_id')
                )
            ->join(
                array('ac' => $this->_getResource()->getTableName('catalog_category_entity_' . $attr['backend_type'])),
                "c.category_id = ac.entity_id AND ac.attribute_id = {$attr['attribute_id']}",
                array('child_category_name' => 'value')
            )
        ->order('child_category_name DESC');

        return $this;
    }

    protected function _getAttribute($attributeCode, $static = true, $entityTypeId = 3)
    {
        $readAdapter = $this->_getReadAdapter();
        $select = $readAdapter->select()
            ->from($this->_getResource()->getTableName('eav/attribute'))
            ->reset(Zend_Db_Select::COLUMNS)
            ->columns(array('attribute_id', 'backend_type'))
            ->where('entity_type_id = ?', $entityTypeId)
            ->where('attribute_code = ?', $attributeCode)
            ->limit(1);
        if (!$static) {
            $select->where('backend_type != ?', 'static');
        }

        $entityId = $readAdapter->query($select)->fetch();
        return $entityId;
    }

    protected function _getResource()
    {
        return Mage::getSingleton('core/resource');
    }

    protected function _getReadAdapter()
    {
        return $this->_getResource()->getConnection('core_read');
    }
}

here we set collection sort by child category name, you can change it to category id or add to collection any category attribute and sort by this attribute

->order('child_category_name DESC');

this is just sample how quickly sort product collection by child categories, of course you can add option in toolbar and sort collection dynamically