用于将列堆叠在一起的 CSS

Question

我希望有两列（左列与 right 对齐文本，右列与 left 对齐文本）文档的大小调整到一定宽度以下。发生这种情况时，我还希望将两个文本的对齐方式更改为 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

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

CSS

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