XML - Elements not output in the correct order

Question

I want to change the output order of the elements. He currently displays them as follows: "Maths: English: Science: ABA (GCSE); (GCSE); (GCSE)"; I need a way to arrange it so that I can display it like this: "Mathematics: A (GCSE), English: B (GCSE), science: A (GCSE)"; I am new to XML, so please try not to show redundant solutions!

XSL Code:

<xsl:template match="education">
<div style="float:left;">
    <xsl:apply-templates select="qualifications/qual"/>
    <xsl:apply-templates select="qualifications/grade"/>
    <xsl:apply-templates select="qualifications/level"/>
</div>
</xsl:template> 

<xsl:template match="qual"><span style="color:grey; font-size:15px; font-family:verdana;">        
<xsl:value-of select="."/></span><p1>:</p1></xsl:template>
<xsl:template match="grade"><span style="color:grey; font-size:15px; font-family:verdana;"><xsl:value-of select="."/></span><p1> </p1></xsl:template>
<xsl:template match="level"><p1> (</p1><span style="color:grey; font-size:15px; font-family:verdana;"><xsl:value-of select="."/></span><p1>);</p1></xsl:template>

XML Code:

<qualifications>
            <qual>Mathematics</qual>                        <grade>A</grade>    <level>GCSE</level>
            <qual>English</qual>                            <grade>B</grade>    <level>GCSE</level>
            <qual>Science</qual>                            <grade>A</grade>    <level>GCSE</level>
</qualifications>

Answer 1

qual, grade, level , . education:

<xsl:template match="education">
    <div style="float:left;">
        <xsl:apply-templates select="qualifications/*" />
    </div>
</xsl:template>

qualifications (.. , ). . XSLT- .

Answer 2

. , :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:output method="xml" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="education">
    <div style="float:left;">
        <xsl:for-each select="qualifications/qual">
            <xsl:variable name="pos" select="position()"/>
            <xsl:apply-templates select="../qual[$pos]"/>
            <xsl:apply-templates select="../grade[$pos]"/>
            <xsl:apply-templates select="../level[$pos]"/>
        </xsl:for-each>
    </div>
</xsl:template> 

<xsl:template match="qual"><span style="color:grey; font-size:15px; font-family:verdana;">        
<xsl:value-of select="."/></span><p1>:</p1></xsl:template>
<xsl:template match="grade"><span style="color:grey; font-size:15px; font-family:verdana;"><xsl:value-of select="."/></span><p1> </p1></xsl:template>
<xsl:template match="level"><p1> (</p1><span style="color:grey; font-size:15px; font-family:verdana;"><xsl:value-of select="."/></span><p1>);</p1></xsl:template>

</xsl:stylesheet>