0

I have seen several examples on how you can stack the coloumn order in bootstrap by using col-*-push-12, but can you do that to the divs with class container-fluid?

I have the following HTML:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
            ...
            </div>
            <div class="col-md-6 col-sm-12">
            ...
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
            ...
            </div>
            <div class="col-md-8">
            ...
            </div>
        </div>
    </div>
</div>

How do I use the push classes to reverse the stack order (move mydiv2 up and mydiv1 down) in small devices?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Adeline Kyan
  • 1
  • Why do you have multiple and nested containers? In my experience, one is usually sufficient. Content is then structured and ordered using rows and columns, nesting those if necessary. For example, your structure is probably simplified to this: http://jsfiddle.net/isherwood/w54fphvy/ – isherwood Jun 23 '15 at 16:21
  • Ah.. you got the point there. If I can manage to include my cols in a single container, I can achieve the result I want. Thanks. Will test and post my results. – Adeline Kyan Jun 23 '15 at 21:02
  • @isherwood Here the problem I faced again. I need to include the container-fluid twice because they both contain different bg colors which I want to fill the screen. I cannot possibly include the bg color css rule to cols because they are nested under container which is positioned in the center with width 1170px. Any workaround you can think of? – Adeline Kyan Jun 23 '15 at 21:10
  • Whoops. Wrong fiddle up there. http://jsfiddle.net/isherwood/ycdcko60/ – isherwood Jun 23 '15 at 21:12
  • Rows, when used properly, fill the width of the screen: http://jsfiddle.net/isherwood/ycdcko60/1/ – isherwood Jun 23 '15 at 21:13
  • Now can you flip the rows when viewed in small devices using push? – Adeline Kyan Jun 23 '15 at 21:18
  • possible duplicate of [reorder rows in bootstrap](http://stackoverflow.com/questions/27311260/reorder-rows-in-bootstrap) – isherwood Jun 23 '15 at 21:20
  • After reading it, I think bootstrap does not support it natively or atleast without some hacks. I will take some more time to read it and monkey my codes again. – Adeline Kyan Jun 23 '15 at 21:23

1 Answers1

0

Sure, the Bootstrap push, pull classes work in container-fluid..

<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-push-6 col-sm-12">
            1
            </div>
            <div class="col-md-6 col-md-pull-6 col-sm-12">
            2
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
            1
            </div>
            <div class="col-md-8 col-md-pull-4">
            2
            </div>
        </div>
    </div>
</div>

Demo on Codeply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624