Html 使用页面大小引导更改文本对齐方式

我有两个div，使用bootstrap并排居中。一个div文本右对齐，另一个文本左对齐。我正试图使它们在页面变小时能够并排查看，从而使它们彼此居中。我曾尝试在CSS中使用@media规则来处理这个问题，但没有成功。有什么建议吗？到目前为止，HTML如下所示：

<div class="container-fluid">
    <div class="col-md-3 col-md-offset-3 text-right">
        <p class="summary">Some summary text</p>
    </div>
    <div class="col-md-3 text-left">
        <p class="description">An extended description</p>
    </div>
</div>

---

300px最大宽度太小，无法触发。如果您使用的是.col-md-3，那么这两列将占据从992px和更低开始的全屏宽度。见

@介质最大宽度：992px{ 总结 .说明{ 文本对齐：居中； } }

一些摘要文本

扩展描述

---

300px最大宽度太小，无法触发。如果您使用的是.col-md-3，那么这两列将占据从992px和更低开始的全屏宽度。见

@介质最大宽度：992px{ 总结 .说明{ 文本对齐：居中； } }

一些摘要文本

扩展描述

---

为列指定一个id，因为这将在css中更加具体，并覆盖引导css

<div class="container-fluid">
    <div id="column-one" class="col-md-3 col-md-offset-3 text-right">
        <p>Some summary text</p>
    </div>
    <div id="column-two class="col-md-3 text-left">
        <p>An extended description</p>
    </div>
</div>

---

为列指定一个id，因为这将在css中更加具体，并覆盖引导css

<div class="container-fluid">
    <div id="column-one" class="col-md-3 col-md-offset-3 text-right">
        <p>Some summary text</p>
    </div>
    <div id="column-two class="col-md-3 text-left">
        <p>An extended description</p>
    </div>
</div>

---

共享您的@media CSS。@PraveenKumar编辑了我的问题以包含CSS。如果您在移动设备上测试，您确定您测试的屏幕大小小于300px宽吗？如果没有，这可能就是您认为它不起作用的原因。请共享您的@media CSS。@PraveenKumar编辑了我的问题以包含CSS。如果您在移动设备上进行测试，您确定要测试的屏幕大小小于300px宽吗？如果没有，那可能就是你认为它不起作用的原因。

@media screen and (max-width: 300px) {
    #column-one, #column-two {
        text-align: center;
    }
}