Html 当元素被包装到另一行时，如何在元素上有不同的行为

我的标题栏上有两个内联块元素。右边的元素是向右浮动的，但是当屏幕变得很窄以至于被另一条线包裹时，我想将其居中

编辑：第一个元素内容是用户提交的，所以我事先不知道它的宽度

下面我介绍了我正在寻找的基于javascript的行为解决方案

仅使用CSS是否可以实现这一点

$（窗口）.bind（“调整大小”，函数（）{
var totalWidth=$（'.container'）.width（），
firstWidth=$（'.first'）.width（），
secondWidth=$（'.second'）.width（）；
如果（总宽度>第一宽度+第二宽度）{
$（“.container”）.addClass（“单行”）；
$（“.container”）.removeClass（'two-line'）；
}否则{
$（“.container”）.addClass（“两行”）；
$（“.container”）.removeClass（'one-line'）；
}
});
.container div{
显示：内联块；
}
.集装箱.单线.第二个集装箱{
浮动：对；
}
.集装箱.两条线.第二个集装箱{
显示：块；
文本对齐：居中；
}

单线和双线布局：左对齐
一个lne布局：右对齐。双线布局：居中对齐。
CSS媒体查询是实现this@DeepakDavid很好的建议，但是第一个元素的内容是用户提交的-所以我不知道第二个元素何时包装。除了媒体查询，我不知道使用CSS的其他解决方案。您可以始终指定最小宽度并解决该问题