用于将列一个堆叠在另一个上面的CSS

Question

我希望有两列（左侧列的文字与右侧对齐，右侧列的文字与左侧对齐）在相互叠加时文档大小调整到一定宽度以下。当发生这种情况时，我也希望两个文本的对齐方式都改为 center 。

问题：如何使用普通css（没有css3或JavaScript）实现这一目标？

编辑：这是我第一次解决这个问题，当宽度减小时，将列一个堆叠在另一个上面但是对齐当然是左/右。

<div style="max-width: 500px;">
    <div style="min-width: 240px; display: inline-block; font-weight: bold; text-align: right;">Delivery date:</div>
    <div style="min-width: 240px; display: inline-block; text-align: left;">Tuesday 24 May</div>
</div>

Answer 1

使用相同的媒体查询

HTML

text-left{
  text-align:left;
}
.text-right{
  text-align:right;
}
@media (max-width:991px){
  .text-left, .text-right{
     text-align:center;
  }
}

CSS

delete 
    from MULTIPLECALCCLASSDEF 
    where SCHEMEHISTID in (select MULTIPLECALCCLASSDEF.SCHEMEHISTID from SCHEME  where SCHEMEID = @intScheme);