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用于显示/对齐div

媒体查询

HERE

尝试使用div标签的CSS中的display属性。

PS

不要忘记在媒体查询中进行更改，否则会更改所有内容。

祝你好运：）