CODEWITHSUNDEEP
mobiletwitter-bootstrap-3
Luca
Luca

Reputation: 994

Bootstrap on mobile: two column on horizontal view

is there a way on bootstrap, in mobile view, to have one column listing on vertical view and, on phone rotation, two column on horizontal view, using the usual col-xs-xx methodology?

I'm not able to find a way. Thank you.

Upvotes: 1

Views: 1437

Answers (3)

alberto-bottarini
alberto-bottarini

Reputation: 1231

By default Bootrap has this configuration:

< 768px   = -xs- prefix
>= 768px  = -sm- prefix
>= 992px  = -md- prefix
>= 1200px  = -lg- prefix

Using this standards, Bootstrap considers mobile portrait and landscape both as -xs- devices.

You could override (using less or sass/scss) this variables:

@screen-sm-min
@screen-md-min
@screen-lg-min

to achieve what you are looking.

For example you could change @screen-sm-min to 480px to target vertical device with -xs- prefix and horizontal device with -sm- prefix.

Mind you that in this way you lose the possibility to target portrait tablet.

Upvotes: 1

Luca
Luca

Reputation: 994

Thanks to cakebake suggestion, this is a working example

https://jsfiddle.net/mud16c60/

<div class="container">
    <div class="row" id="extra">
        <div id="switch1" class="col-xs-12">
            left
        </div>
        <div id="switch2" class="col-xs-12">
            right
        </div>
    </div>
</div>
<div id="orientation"></div>

$(window).on("orientationchange",function(event){
    $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
    if(event.orientation=="landscape")
    {
        $("#extra [id^='switch']").removeClass( "col-xs-12" );
        $("#extra [id^='switch']").addClass( "col-xs-6" );
    }
    else if(event.orientation=="portrait")
    {
        $("#extra [id^='switch']").removeClass( "col-xs-6" );
        $("#extra [id^='switch']").addClass( "col-xs-12" );
    }
});
$( window ).orientationchange();

Upvotes: 1

cakebake
cakebake

Reputation: 11

The column breakpoints are based on your device viewport in pixels. You could modify this breakpoints with bootstraps generator, less, scss or harder with hacking the bootstrap core css. You could also generate additional breakpoints with less/scss.

You could also do some magic with jquery "on orientationchange" and toggle some classes when viewport width is greater as viewport height. ;)

Upvotes: 1

Related Questions