Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

<div class="row">  <div class="col-sm-6 col-xs-12">    <p class="text-left one">      1111    </p>  </div>  <div class="col-sm-6 col-xs-12">    <p class="text-right two">      2222    </p>  </div></div>

@media (max-width: 768px) {  .container-fluid .row p{    color: #fff;    font-size: 16px;    text-align: center;    line-height: 30px;  }  .row .text-left{    margin-top: 20px;  }}

/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }