Child of Parent

Child of parent issue.

I have 4 spheres which land on top of each other and when there is a collision the sphere will become a child of the one it hits but for some reason after all collisions the hierarchy looks like this:

>red
  >red
    >red
       >red

My intentions are to have it look like this (one parent and 3 child objects):

>red
  red
  red
  red 

How would I go about achieving this?

var whatColor : String;

function OnCollisionEnter  (other : Collision)
{
    if(whatColor == "red" && other.gameObject.tag == "red")
    {
         other.transform.parent = transform;//makes it a child
    }
    if(whatColor == "yellow" && other.gameObject.tag == "yellow")
    {
         other.transform.parent = transform;
    }
    rigidbody.isKinematic = true;
}

My intentions in the end are that once there are 3 child objects then destroy the parent something like this:

function Update()
{
    if(transform.childCount > 2)
    {
        Destroy(gameObject);
    }
}

But I can’t see if it will work until I get the hierarchy correct. Can someone give me an example of how to code this properly?

other.transform.parent = transform.root; ?