Comment modifier l'ordre des éléments et le flux de contrôle dans un code CSS réactif ?

Question

J'utilise skeleton et voici la mise en page responsive que je souhaite :

Mise en page mobile - Titre, Image, Description dans une seule colonne

Mise en page du bureau - Le titre et la description se trouvent à droite de l'image.

Comment dois-je structurer le html et le css pour que la mise en page responsive puisse changer de l'un à l'autre en utilisant uniquement le css et les media queries ? J'ai essayé de faire flotter l'image à gauche dans la présentation desktop et de faire du titre un bloc dans la présentation mobile :

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>

CSS mobile

.title {
     display:block;
}

.thumbnail {
}

.conatainer {
 width:320px;
}

CSS de bureau

.title {
     position:relative;
}

.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

Cela semble fonctionner dans l'ensemble, sauf que la description s'enroule sous la photo et l'entoure en bas de la photo si le texte est assez long, au lieu de rester dans la colonne de droite.

Comment dois-je procéder si j'utilise skeleton ou l'un des systèmes de grille responsive, dois-je utiliser leurs classes de colonnes ?

Answer 1

Vous pouvez définir float: left également sur .description paragraphe sur desktop.css feuille de style. Cela permettra de développer votre paragraphe dans sa propre "colonne".

Ensuite, n'oubliez pas d'appliquer également une compensation à .container élément