'Why is col-sm-* applying to xs screens?

I am using bootstrap for a project, and I am using different column widths for xs, sm, and md screens. When I apply col-xs-* and col-md-* , the columns resize perfectly for xs, md, and lg screens. When I add col-sm-*, the columns resize perfectly for sm, md, and lg, but I lose the xs configuration and it's replaced with the sm layout.

Can anyone help me out? How can I keep the xs layout along with the sm layout?

    <div class="container-fluid main-content text-center">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-10">
          ...
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              ...
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
              ...
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 latest-headlines">
          ...
          <div class="more-news-button">
            ...
          </div>
        </div>
      </div>
    </div>
htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

It is Boostrap 3.4.1. It turns out the problem was I didn't have this line in the head. This solved it!

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paige Green-Purba

Related Questions