Charger le contenu d'une div masquer dans une autre div

Bonjour,

Comment pourrais je faire pour charger le contenu d'une div masquer en remplacement du contenu du div afficher par défaut ?

je vous explique :
en fait j'ai une page avec

• un header
• ensuite j'ai une sorte de aside ou une div dans laquelle je vais afficher les info détaillées de mes vignettes
• et juste en dessous du aside, j'ai deux div côte à côte qui sont tous les deux des vignettes, sauf que dans le premier il y aura qu'un seul image (donc une grande vignette) et dans le second il y aura 4 petites vignettes.

Voici l'image de la struture de ma page en image pour mieux voir:
[URL=http://www.casimages.com/i/160824102410496822.png.html][IMG]http://nsa37.casimages.com/img/2016/08/24/160824102410496822.png[/IMG][/URL]

Ce que j'aimerai avoir :

je voudrais qu'au chargement de la page la div contenant les détails de la grande vignette s'affiche par défaut dans l'aside et les divs contenants les détails des petites vignettes sont masquer.
Ensuite lorsqu'on clique sur l'un des 4 petites vignettes sont contenu s'affiche en remplacement du contenu de la grande vignette afficher par défaut dans l'aside du dessus.
A noter que dans l'asside il y a un petite croix qui permet de fermer le contenu afficher afin de retourner vers le contenu par défaut (donc les détails de la grande vignette).

STRUCTURE DE MON CODE HTML :

<div id="main">
<div id="header></div>

<div id="container"
<div id="articles">
   <!-- le petit bouton pour fermer -->
      <div class="close"></div>

        <!-- detail-gd-vignette -->
        <div class="article colonnes">
        <div class="content">
           <div class="section"></div>
        </div>
        </div>

         <!-- detail-pt-vignette-1 -->
        <div class="article edito">
          <div class="content">
             <div class="section"></div>
          </div>
        </div>

         <!-- detail-pt-vignette-2 -->
         <div class="article edito">
         <div class="content">
            <div class="section"></div>
          </div>
         </div>

          <!-- detail-pt-vignette-3 -->
         <div class="article edito">
         <div class="content">
            <div class="section"></div>
          </div>
         </div>

         <!-- detail-pt-vignette-4 -->
        <div class="article edito">
        <div class="content">
           <div class="section"></div>
          </div>
        </div>
</div>

<div id="vignettes">
  <div class ="gd-vignette>
  </div>

  <div class="pt-vignette">
     <!-- pt-vignette 1-->
      <div class="blocCadre"></div>
      <!-- pt-vignette 2-->
      <div class="blocCadre"></div>
      <div class="clear"></div>
      <!-- pt-vignette 3-->
      <div class="blocCadre"></div>
      <!-- pt-vignette 4-->
      <div class="blocCadre"></div>
  </div>
</div>
</div>

<div class="footer"></div>
</div