CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Jack
Jack

Reputation: 3057

Need to be able to swap grid on mobile

Best explained with pictures i believe. My website. enter image description here

I have set up a hosting for my website so it is easier to see.

Problem : When on mobile devices due to the way i have it set up it causes the pictures to stack the wrong way like below.

Question : Is there a way I can switch these two col-md 6 's around when the screen is less that X pixels across?

Upvotes: 1

Views: 950

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Your question will be duplicate of Order of div on mobile, Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid) or Article push/pull alignment using bootstrap 3 so i will vote for close this too.

In your case you basically do this:

css:

.floatright{float:right;} @media (max-width: 767px) { .floatright{float:none;} }

Note change 767 to 991 when you use the medium (col-md-) grid. In your case i should prefer the small grid (col-sm-) cause the grid-float-breakpoint is set to 767px by default too (see: Bootstrap 3 Navbar Collapse)

html:

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
    <div class="row">
        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>
    </div>
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>

You also mentioned "line 106 that col-md-6 is not in a row div". You are right and i was wrong here (typo). The above code is the right one, with column wrapped in rows. The docs http://getbootstrap.com/css/#grid-example-mixed-complete show its not required columns alway sum up to 12. This is not the case here, but the above will also work with all columns in one row like:

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>

Upvotes: 2

Related Questions