-1

I would like to change the vertical order of 2 columns on a page in mobile view, so that column 2 goes first and column 1 follows.

The current order is that column 1 goes first and column 2 goes second, both in mobile and desktop view. In mobile view, the columns are stacked vertically, which is how I want to keep them, only in different order.

I tried using float, but something in the template's CSS is overriding the customizations. Here is a test page, and here is the HTML.

<body class="theme-invert">
    <div class="container">
        <div class="row-fluid">         
            <section class="section">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-1">
                            <div class="panel panel-default">
                                <div class="panel-body">        
                                    <h2>Column 1</h2>                                           
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="panel panel-default">
                                <div class="panel-body"> 
                                    <h2>Column 2</h2>                             
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

Edit: this is different from the question suggested in the comments because that starts out with columns in the same class, whereas my columns are already in different classes, but I still haven't been able to get them to behave differently in mobile view.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Dave
  • 628
  • 5
  • 13
  • is this what you are looking for: http://www.w3schools.com/cssref/css3_pr_order.asp – Andrew May 18 '15 at 10:15
  • possible duplicate of [Bootstrap 3: pull-right for col-lg only](http://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only) – Gildas.Tambo May 18 '15 at 10:26
  • It's not a duplicate, because in that question the solution is to make column 1 into a smaller column class (as defined by Bootstrap's css). In my case, columns 1 and 2 are already different classes, and I still haven't been able to get it to work. – Dave May 18 '15 at 10:29

1 Answers1

0

Just give your col-sm-4 a float:right and start playing with CSS until it looks like it should.

See this crappy fiddle where I just copied all your stuff and added the first line:

.col-sm-4 {float:right !important}
Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
  • Hi. I have actually already tried that. As you can see, it doesn't really rearrange the columns vertically. Bootstrap already has a feature built in that stacks the columns neatly on top of each other in mobile view, I just need to change their order. – Dave May 18 '15 at 11:00
  • You never mentioned they had to be reordered vertically... Please set up a functioning JSFiddle (that doesn't look crappy like mine, where I just copy pasted everything) so we can play with it. – Rvervuurt May 18 '15 at 11:07
  • Thanks. I have edited the question to clarify the point about vertical stacking. Your fiddle is as nice as I can make it. I have already gotten rid of over 10,000 lines of CSS code and only kept elements that might contain something that's overriding the float settings. This code came from Bootstrap, and it's a little complex for me to troubleshoot. – Dave May 18 '15 at 11:23