Html 响应性包装对齐

我希望使用CSS实现以下效果：

浏览器的宽度足以容纳文本：|左文本右文本|
浏览器不够宽，无法容纳文本：|左文本|
|右文本|

当浏览器宽度足以容纳文本（未包装）时，左侧文本将与左侧对齐，右侧文本将与右侧对齐。当浏览器小于左文本和右文本的宽度（通常会强制文本换行）时，我希望右文本移动到左文本下方，并使它们居中。这是否仅适用于媒体查询

我曾尝试将

display:table

应用于父div，然后将

display:table cell

放在左侧和右侧文本元素上，但最终得到以下结果：

|左-右|（文本已包装在其自身一侧）
|文本|

您可以通过媒体查询来实现

.left-text {float: left;}
.right-text {float: right;}


/*You set break point according to your requirement*/

@media only screen and (max-width: 768px) {
.left-text {float: none; text-align:center;}
.right-text {float: none;  text-align:center;}
}

---

问题是字体的宽度可能不总是相同的，所以我没有一个常量值来设置最大宽度。我们不能这样做。我的建议是，如果文本较长，则使用768px；如果文本较短，则使用480px