xslt: How do I wrap different tags with new tags
<p>I'm not sure this is even doable with xslt, but here goes.
I need to break the xml from articles into different parts. </p>

<p>I need to get all xml until the first div with class name <strong>full-width</strong> and wrap that in a div with class name <strong>narrow-wrap</strong>.<br>
The <strong>full-width</strong> div needs to be wrapped with a div with class name <strong>wide-wrap</strong>.   </p>

<p>Then a new div with class narrow-wrap starts and all xml until the next div with class full-width goes into that. And so on. </p>

<p>This is a simplified version of the xml. Tags can have nested content, as well as attributes.  </p>

<pre><code>&lt;p&gt;lorem&lt;/p&gt;
&lt;div&gt;ipsum&lt;/div&gt;
&lt;div class="full-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;p&gt;lorem&lt;/p&gt;
&lt;p&gt;ipsum&lt;/p&gt;
&lt;div class="full-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;div class="narrow-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;p&gt;lorem&lt;/p&gt;
&lt;div class="full-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;div class="full-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
&lt;table&gt;ipsum&lt;/table&gt;
&lt;p&gt;lorem&lt;/p&gt;
&lt;p&gt;ipsum&lt;/p&gt;        
&lt;div class="narrow-width"&gt;
    &lt;img src="image.jpg" /&gt;
&lt;/div&gt;
</code></pre>

<p>This is how I need it to look like after transformation:</p>

<pre><code>&lt;div class="narrow-wrap"&gt;
    &lt;p&gt;lorem&lt;/p&gt;
    &lt;div&gt;ipsum&lt;/div&gt;
&lt;/div&gt;

&lt;div class="wide-wrap"&gt;
    &lt;div class="full-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="narrow-wrap"&gt;
    &lt;p&gt;lorem&lt;/p&gt;
    &lt;p&gt;ipsum&lt;/p&gt;
&lt;/div&gt;

&lt;div class="wide-wrap"&gt;
    &lt;div class="full-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wide-wrap"&gt;
    &lt;div class="narrow-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="narrow-wrap"&gt;
    &lt;p&gt;lorem&lt;/p&gt;
&lt;/div&gt;

&lt;div class="wide-wrap"&gt;
    &lt;div class="full-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="wide-wrap"&gt;
    &lt;div class="full-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="narrow-wrap"&gt;
    &lt;table&gt;ipsum&lt;/table&gt;
    &lt;p&gt;lorem&lt;/p&gt;
    &lt;p&gt;ipsum&lt;/p&gt;        
    &lt;div class="narrow-width"&gt;
        &lt;img src="image.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The xsl for the full-width part would be something like this:  </p>

<pre><code>&lt;xsl:template match="div[contains(concat(' ', @class, ' '), ' full-width ')]"&gt; 
    &lt;div&gt;
        &lt;xsl:attribute name="class"&gt;
            wide-wrap
        &lt;/xsl:attribute&gt;
        &lt;xsl:copy-of select="."&gt;&lt;/xsl:copy-of&gt;
    &lt;/div&gt;
&lt;/xsl:template&gt;
</code></pre>

<p>The part of wrapping all the other content in blocks of divs with class narrow-wrap is beyond me though.
Is this possible, and if so, how?</p>