Déplacer un bloc sur mobile

[Schwarzer Stern]

Bonjour,
un petit problème en CSS/html avec un design responsive. En version "bureau", j'ai deux colonnes, l'une contenant du texte, l'autre une image illustrant le texte ci-contre, et plusieurs lignes répétant ce schéma sous la forme :

<table>
<tr><td>TEXTE TEXTE TEXTE</td><td><img src="etc1.jpg"></td></tr>
<tr><td><img src="etc2.jpg"></td><td>TEXTE TEXTE TEXTE</td></tr>
<tr><td>TEXTE TEXTE TEXTE</td><td><img src="etc3.jpg"></td></tr>
</table>

En version de bureau donc, les images apparaissent alternativement à droite et à gauche.

En version mobile, en revanche, il n'y a plus qu'une colonne (géré en CSS), et les images "etc1" et "etc2" apparaissent logiquement immédiatement l'une sous l'autre, ce qui n'est pas du meilleur effet.

Quelqu'un aurait-il une solution CSS pour que etc2 soit décalé sous le texte qu'elle illustre ? Sinon je pense pouvoir créer un JS pour ça, mais tant qu'à faire…
(un exemple si je n'étais pas clair : http://www.parisdigest.com/monument/chateaudeversailles.htm)

Merci !

 

[p0k3]

Je réponds tardivement:
Pourquoi utiliser des tableaux, quand des div font l'affaire :

<div class="row">
  <div class="img left">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>
<div class="row">
  <div class="img right">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>
<div class="row">
  <div class="img left">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>

et en CSS :

.row{
  display: block;
  overflow:hidden;
}
.img.left{
  float:left;
  display:inline-block;
}
.img.right{
  float:right;
  display:inline-block;
}

et la version mobile :

.img{
  display:block;
  float:none;
}

ça marcherai très bien aussi !

 

[Schwarzer Stern]

Merci pour ta réponse !
Effectivement, ça serait la meilleure solution, je ne suis pas fan des tableaux…mais le site en question n'est pas de moi et est composé de 100aines de pages statiques basées sur ce modèle, et en attendant de pouvoir tout refaire (peut-être en codant un petit php pour modifier tout ça) je dois conserver les tableaux… :\
C'est peut-être le signe que je dois me bouger pour trouver la solution pour passer tout ça en div, en espérant que ce soit aussi stable que ces vieux tableaux ^^
S'il n'y a pas d'autre solution, je vais m'y atteler.

 

[p0k3]

Pas d'autres solutions je pense...

 

[Schwarzer Stern]

J'ai surtout peur de ne pas pouvoir centrer verticalement l'image avec un float…pour l'instant mes essais sont infructueux, mais je continue…