HTML css table sensible avec différentes lignes

Question

Je construis une liste simple des éléments de db. Chaque élément de cette liste contient 5 éléments. Sur les écrans de bureau j'ai assez d'espace pour tous les afficher dans une ligne comme celle-ci:

Dans l'échantillon principe est produit ci-dessus à l'aide de cette table css:

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="divTableCell img">PHOTO</div> 
      <div class="divTableCell title">TITLE</div> 
      <div class="divTableCell price">PRICE</div> 
      <div class="divTableCell bids">BIDS</div> 
      <div class="divTableCell timeleft">TIME LEFT</div> 
     </div> 
    </div> 
</div> 

.divTable { 
    display: table; 
    width: 100%; 
} 
.divTableRow { 
    display: table-row; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 
.divTableCell, .divTableHead { 
    display: table-cell; 
    padding: 3px 10px; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 
.divTableFoot { 
    background-color: #EEE; 
    display: table-footer-group; 
    font-weight: bold; 
} 
.divTableBody { 
    display: table-row-group; 
} 

Je suis à la recherche d'une solution en utilisant CSS requête médias pour afficher les résultats d'une manière différente pour mobile:

------------------------- 
IMG | Title 
    | Price Bids TimeLeft 
------------------------- 

Chaque ligne est générée sur backend, donc je peux changer toute la structure html, mais je n'ai aucun contrôle sur ce que son largeur affichée pour, est-il une option pour atteindre STH comme ceci en utilisant seulement des requêtes et des médias css? Pouvez-vous me montrer la bonne direction?

Answer 1

Avez-vous essayé de faire une requête média ou non? Je vais juste vous donner une idée comment le faire:

HERE pour afficher/alignement de la div

HERE pour les médias requête

Essayez de jouer avec l'attribut d'affichage dans le CSS du div marque.

PS

Ne pas oublier de faire le changement dans la requête des médias sinon il va changer tout cela.

Bonne chance :)