For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. However, upon adding col-sm-*, the columns adjusted well for sm, md, and lg screens but unfortunately, the xs configuration was overridden by the sm layout.
Is there anyone who can offer some guidance or suggestions on how to maintain both the xs and sm layouts simultaneously?
<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>