bootstrap pulling/pushing 12 columns not working properly

Question

I am trying to have 2 columns inverted in middle (up) resolutions.

Here is my code on bootply that you can see here as well:

<div class="container">
  <div style="border:1px solid red;">
    <div class="row">
      <div class="col-md-12 col-md-push-12"><div style="background:yellow;">in xs this first</div></div>
        <div class="col-md-12 col-md-pull-12"><div style="background:orange;">in xs this after</div></div>
    </div>
  </div>
</div>

As you can see, in xs screen, the order is the one written on screen.

What I wanted is that on bigger resolutions, the order should be inverted. Even if I push/pull a number of 12 columns (to have them inverted), the result is what you see.

Do you have any suggestion?

Thank you

score 0 · Answer 1 · edited Apr 06 '16 at 08:41

0

If your interested in doing without bootstrap than here's a JSFiddle

You can call any classes and use wisely with Media Queries

HTML:

<div class="parent">
    <div class="child-1">
        <p>First</p>
    </div>
    <div class="child-2">
        <p>Second</p>
    </div>
</div>

CSS:

.parent{
  display:table;
  width: 100%;
}

.parent .child-1{
  display: table-footer-group;
  background:yellow;
}

.parent .child-2{
  display: table-header-group;
  background:green;
}

edited Apr 06 '16 at 08:41

Kaspar Lee

5,446
4
31
54

answered Apr 06 '16 at 06:56

AJ.

26
3

You can find more solution on bootstrap full-width column pull-push here: http://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull – AJ. Apr 06 '16 at 07:19
Thanks for the fiddle. I ended up with a "poor-man" solution. I duplicated the div I want to move up/down and assigned a visibility class for XS / MD. That made the trick rapidly. Still I cannot figure out how come the push/pull thing doesn't work with col-*-12 divs. – Aptivus Apr 06 '16 at 07:55

score 0 · Answer 2 · answered Apr 06 '16 at 07:16

0

Bootstarp pulling pushing need proper column number like below

div style="border: solid 1px red">
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>

Refer here

answered Apr 06 '16 at 07:16

Karthi Keyan

804
6
18

so basically, if I want to push/pull col-*-12 , that cannot be done. Right? – Aptivus Apr 06 '16 at 07:52

Carol Skelly · Answer 3 · 2022-01-08T18:03:58.220

It's not really possible to reverse full-width (12) columns using Bootstrap push pull class. You'd have to use the responsive utility classes which requires duplicate content.

Or, use a CSS media query and transform to reverse the order on xs...

@media (max-width: 768px) {
  .row.switch-xs {
    transform: rotate(180deg);
    direction: rtl;
  }

  .row.switch-xs > [class^="col-"] {
    transform: rotate(-180deg);
    direction: ltr;
  }
}

Demo of both methods: http://bootply.com/nT8kUqB6d8

Update 2017

Now it's possible to reverse order of full-width columns on XS.

For Bootstrap 4, no extra CSS is necessary for this. Simply use the flexbox ordering classes to "pull up" the 2nd div on xs screens:

   <div class="row text-center">
        <div class="col-md-12">
            <div style="background:orange;">last on xs</div>
        </div>
        <div class="col-md-12 flex-first flex-md-unordered">
            <div style="background:yellow;">first on xs (pull me up)</div>
        </div>
    </div>

http://codeply.com/go/NV4mTbRKpC

bootstrap pulling/pushing 12 columns not working properly

3 Answers3

Update 2017

Linked