CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AnchovyLegend
AnchovyLegend

Reputation: 12538

Bootstrap basic grid layout conflict

A portion of a site I am working on has a two-column design. I would like this to be implemented for all screen sizes, except on xs devices. On xs devices, I would like a single column design. I feel like the below approach is incorrect, as the col-span should always add up to 12 in all cases, and it is currently not the case for xs screens. On the other hand, if I change it col-xs-6, it is forcing double column designs on extra small screens, which I am trying to avoid.

What is the correct way to accomplish a single column design on extra smalls screens, while maintaining a double column design on all other screen sizes ?

This is what I tried:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="ac-wrapper">
                <div class="ac-h">
                    Heading 2
                </div>
                <p class="ac-p">
                text here text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text here text here 
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="ac-wrapper">
                <div class="ac-h">
                    Heading 123
                </div>
                <p class="ac-p">
                    text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text her text here text here text here text here 
                </p>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 786

Answers (1)

Nikhil Agarwal
Nikhil Agarwal

Reputation: 412

One solution is to toggle content visibility using http://getbootstrap.com/css/#responsive-utilities

Upvotes: 1

Related Questions