paragraphs not staying together in different viewports

Question

My text isn't wrapping properly when I switch to a smaller viewport. (make window smaller). Does anybody has a clue what the problem could be or how I can solve this problem?

"kan ik met" is seperated from the rest of the paragraph.

When I make my viewport even smaller than:

"kan ik met" and "opleidingscheques betalen? Heb ik recht op" is split from the rest of the paragraph.

(I can't post pictures yet)

Thanks in advance!

http://www.syntra-limburg.be/contact

<style type="text/css">
#links {
}

#otherinfo {
    float:right;
    clear:right;
}
.campus {
    width: 300px;
}
#hoofdzetel {
    float: right;
}
#sbo {
    float: right;
}
#hasselt {
    float: right;
    clear: right;
}
#genk {
    float: right;
}
#neerpelt {
    float: right;
    clear:right;
}
#maaseik {
    float: right;
}
#tongeren {
    float: right;
    clear: right;
}
#tessenderlo {
    float: right;
}</style>
<div class="campus" id="hasselt">
    <p><strong><img alt="SYNTRA Limburg campus Hasselt" src="/sites/files/content/algemene_paginas/thumb_sbo.png" style="width: 90px; height: 90px; float: left; padding: 10px;" />Bedrijfsopleidingen</strong><br />
        Herkenrodestraat 20<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/5517">Meer info</a></p>
</div>
<div class="campus" id="hoofdzetel">
    <p><strong><img alt="SYNTRA Limburg campus Genk" src="/sites/files/content/algemene_paginas/thumb_hoofdzetel.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Hoofdzetel</strong><br />
        Herkenrodestraat 20<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/2307">Meer info</a></p>
</div>
<div class="campus" id="hasselt">
    <p><strong><img alt="SYNTRA Limburg campus Hasselt" src="/sites/files/content/algemene_paginas/thumb_campushasselt.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Hasselt</strong><br />
        G. Verwilghensingel 40<br />
        3500 Hasselt</p>
    <p>&rarr; <a href="/node/2309">Meer info</a></p>
</div>
<div class="campus" id="genk">
    <p><strong><img alt="SYNTRA Limburg campus Genk" src="/sites/files/content/algemene_paginas/thumb_campusgenk.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Genk</strong><br />
        Kerkstraat 1<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/2308">Meer info</a></p>
</div>
<div class="campus" id="neerpelt">
    <p><strong><img alt="SYNTRA Limburg campus Neerpelt" src="/sites/files/content/algemene_paginas/thumb_campusneerpelt.jpg" style="float: left; padding: 10px;" />Campus Neerpelt</strong><br />
        Hoekstraat 50<br />
        3910 Neerpelt</p>
    <p>&rarr; <a href="/node/2311">Meer info</a><br />
        &nbsp;</p>
</div>
<div class="campus" id="maaseik">
    <p><strong><img alt="SYNTRA Limburg campus Maaseik" src="/sites/files/content/algemene_paginas/thumb_campusmaaseik.jpg" style="float: left; padding: 10px;" />Campus Maaseik</strong><br />
        Weertersteenweg 135A<br />
        3680 Maaseik</p>
    <p>&rarr; <a href="/node/2310">Meer info</a></p>
</div>
<div class="campus" id="tongeren">
    <p><strong><img alt="SYNTRA Limburg campus Tongeren" src="/sites/files/content/algemene_paginas/thumb_campustongeren.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Tongeren</strong><br />
        Overhaemlaan 11<br />
        3700 Tongeren</p>
    <p>&rarr; <a href="/node/2313">Meer info</a></p>
</div>
<div class="campus" id="tessenderlo">
    <p><strong><img alt="SYNTRA Limburg campus Tessenderlo" src="/sites/files/content/algemene_paginas/thumb_campustessenderlo.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Tessenderlo</strong><br />
        Heilig Hartlaan 16<br />
        3980 Tessenderlo</p>
    <p>&rarr; <a href="/node/2312">Meer info</a></p>
</div>
<div id="links">
    <p>Kan ik met <a href="veelgestelde-vragen-prijs-en-betaling">opleidingscheques </a>betalen? Heb ik recht op<a href="veelgestelde-vragen-studeren-bij-syntra#educatief-verlof"> educatief verlof</a>?</p>
    <p>Bekijk eerst de <a href="veelgestelde-vragen">veelgestelde vragen</a>.&nbsp;Je vindt daar een overzicht van de meest voorkomende vragen van cursisten en geïnteresseerden.</p>
    <p>Bijkomende&nbsp;<a href="/node/18">vragen</a>,&nbsp;<a href="/node/19">klachten</a>&nbsp;of&nbsp;<a href="/node/20">ideeën</a>&nbsp;kan je via het gepaste formulier meedelen.</p>
    <p>De campussen zijn ook telefonisch bereikbaar. Klik rechts op &quot;meer info&quot; voor uitgebreide contactgegevens.</p>
    <p id="otherinfo"><strong><a href="veelgestelde-vragen">Veelgestelde vragen</a> - <a href="fotogalerijen">Fotogalerijen </a>- <a href="agenda">Agenda </a>- <a href="brochures">Brochures</a></strong></p>
</div>

Answer 1

You have a floating problem. An easy fix would be to add this: #links { clear: left; }

This is a bit too much floating. The fasted solution in my opinion would be the following:

.responsive-layout-narrow #links,
.responsive-layout-mobile #links
{
    clear: both;
}

That will clear your links container on smaller screens.