Blocs qui se déplacent

Bonjour à tous !

Je viens vous exposer un problème que je rencontre dans ma mise en page, sachant que j'utilise bootstrap.

J'aimerai faire une présentation comme sur l'image :


Donc pour les deux blocs bleu clair et rouge, je fait des div de class "col-sm-1". Pour le bloc orange tout à droite, je fait un col-sm-2 avec un offset, rien d'extraordinaire jusque là. Le problème, c'est quand je veux passer à la ligne d'après, celle-ci commence SOUS mon bloc orange comme sur cette image :


Je ne sais pas comment faire pour que la ligne avec le bloc jaune se cale en dessous des deux petits bloc, sans prendre en compte le bloc tout à droite...
J'ai essayé de bidouiller en rajoutant un style sur la div orange avec du display, position, float... mais ça n'a rien donné...

HELP !

Merci à tout ceux qui prendront un peu de temps pour m'aider!

Voici le code :

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm-1 col-sm-offset-3"><img src="img002.jpg" width="100%" alt="" /></div>
        <div class="col-sm-1"><img src="img003.jpg" width="100%" alt="" /></div>
        <div class="col-sm-1 col-sm-offset-2"><img src="img004.jpg" width="100%" alt="" /></div>
        <div class="col-sm-1"><img src="img005.jpg" width="100%" alt="" /></div>
        <div class="col-sm-2 col-sm-offset-1" style="float:right;"><img src="img006.jpg" width="100%" alt="" /></div>
    </div>
    <div class="row no-gutters">
        <div class="col-sm-3">
            <div class="row no-gutters"><div class="col-sm-4 col-sm-offset-8"><img src="img10.jpg" width="100%" alt="" /></div></div>
            <div class="row no-gutters"><div class="col-sm-12"><img src="img11.jpg" width="100%" alt="" /></div></div>
        </div>
        <div class="col-sm-7 opacity height-presentation" style="text-align:center;"></div>
    </div>
 
</div>