HTML css表响应不同的行

Question

我正在建立简单的db项目列表。 该列表中的每一项都包含5个元素。 在桌面屏幕我有足够的空间，在这样的行中显示所有文件：

在上述原理样品使用这个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; 
} 

我要寻找使用CSS的解决方案媒体查询，显示以不同的方式结果移动：

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

每一行都在后端生成，所以我可以更改整个html结构，但是我没有任何控制它显示的宽度，是否有任何选项可以像使用css和媒体查询一样实现这一目标？你能指点我正确的方向吗？

Answer 1

您是否尝试制作媒体查询？我只是想给你一个提示如何做到这一点：

HERE显示/对准格

HERE媒体查询

尝试在div的CSS与显示属性打标签。

PS

不要忘了做媒体查询的变化，否则它会改变这一切。

祝你好运:)