22

Doing my 1st responsive design and is something like this possible in Bootstrap 3. Change this

To

Change the order essentially from a 3 column layout on large screens to moving the logo to left and stack the other two columns on smaller screens only. I would like to do it using the Bootstrap classes (col-xs-6 col-md-4 etc.) if possible and not have to duplicate content in a show/hide sort of fashion. I liked the grid layout bootstrap3 provides for large screens so would prefer to keep it if could sort out the layout on smaller screens.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Jay
  • 687
  • 2
  • 7
  • 18
  • I posted the answer below using pure Bootstrap 3. Bootstrap has the media queries built in, so I don't understand that part. – Christina Dec 19 '13 at 02:18
  • If I want to style things at the various breakpoints I will need to insert my styles into the @media tags ..(you know the max-width: 480px etc). I just wanted to get an idea of the usual 2 or 3 breakpoints most people use. – Jay Dec 19 '13 at 21:54
  • Bootstrap 3 is mobile first, so anything common to all media sizes goes out side the min-widths, then inside the min-width of your choosing, you would put in the larger device styles. Start a new question titled: How do I work with min-width media queries since the answer is kinda lengthy for this comment box. – Christina Dec 19 '13 at 21:57

6 Answers6

35

DEMO: http://jsbin.com/uZiKAha/1

DEMO w/edit: http://jsbin.com/uZiKAha/1/edit

Yes, this can be done without JS using BS3 nesting and pushing/pulling and all the floats clear:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>
Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
6

Using bootstrap 3:

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

This works because when there’s enough space, they float into their original positions at first. However, when sized to medium and space is lost, they then stack since they can’t float through eachother. Note that while I used 6 columns for both, this works even if they are NOT both 6 columns.

Here is the link: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

jroi_web
  • 1,992
  • 22
  • 23
2

In general you want to group elements that stack, but in your case B and A can't be grouped since Logo needs to be inserted between them in one case. You have two options

Without using JS, I think this is going to be your best option. fiddle here

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

The idea is to use the rollover property of rows to push A down in the xs case. I also use the push/pull classes to rearrange the divs in the sm case. However, the problem here is if Logo is taller than B. Since everything is on the same grid, A aligns with the bottom of the bigger element, giving us blankspace between Logo and B. This really doesn't have any solution with pure Bootstrap CSS. (Maybe someone can correct me)

Instead, I suggest you use JS to move the div when the window resizes. fiddle here

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

and the JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

EDIT: Reference the bootstrap grid docs for info on the push/pull/offset classes.

kalhartt
  • 3,999
  • 20
  • 25
1

I managed to fix this by swapping the columns content using jQuery, Here's the markup:

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

And here's the jQuery script:

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

I hope it helps.

0

I made a small jQuery script that you can fiddle with, to get the desired outcome. Basicly it just detects mobile viewports, and then reorders divs based on their col-class:

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

if (isMobile) {
    var colArray = []; // Make an array of all your columns
    $('.column').each(function () { // Select all the desired columns based on a custom class selector

        if ($(this).hasClass('col-md-6')) { // <--- Change your conditions here
            colArray.unshift($(this));  // if condition is met, the column will be placed as the first element in the array, in my case all my col-md-6's
        } else {
            colArray.push($(this));
        };
    });

    //Now you have an array of the columns, ordered by your conditions
    for (var i = 0, l = colArray.length; i < l; i++) {
        //Just just iterate through the array, and insert each div before the next
        colArray[i].insertBefore(colArray[i+1]);
    }
}
MichaelCleverly
  • 2,473
  • 1
  • 24
  • 33
-3

not a complete answer but here is where you can find out about the bootstrap3 responsive classes

Responsive Bootstrap3 css

Eirwin
  • 63
  • 2