HTML css表响应不同的行

我正在从数据库中建立简单的项目列表。 此列表中的每个项目包含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;
}

---

每一行都是在后端生成的，所以我可以更改整个html结构，但我无法控制它的显示宽度，是否有任何选项可以使用css和媒体查询来实现类似的效果？您能给我指一下正确的方向吗？

您是否尝试进行媒体查询？我只想给你一个提示，怎么做：

用于显示/对齐div

用于媒体查询

尝试在div标记的CSS中使用display属性

PS

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

---

祝你好运：）

答案有用吗？谢谢你！！我确信使用来自回复的信息，我会很好地解决我的问题。我应该发布工作答案吗？是的，我已经尝试过了，但不能得到我想要的结果。我会读更多。

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