11

This is what I need:

Desktop: B A

Mobile: 

A
B

Here is my HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

It is in correct order on mobile device but not on Desktop. I have tried a couple of guides and help material but without luck. In most guides they are moving equal columns like 4 or 6 so it's a bit confusing to understand it clearly.

NXT
  • 1,981
  • 1
  • 24
  • 30
Alena
  • 1,134
  • 6
  • 19
  • 45
  • You're code worked for me. I only changed 'col-md-7 col-sm-7 push-md-5' to 'col-sm-7 push-sm-5' and 'col-md-5 col-sm-5 pull-md-7' to 'col-sm-5 pull-sm-7' so on desktop and tablet it is B A and on mobile its A B vertical – julianstark999 Jul 28 '17 at 06:29
  • Hmm, it works for me using Bootstrap 4.0.0-alpha.6. Which exact version are you using, considering Bootstrap 4 is still in alpha-stage? and on what browser did you test? – cello Jul 28 '17 at 06:29
  • @DestinatioN I have modified code according to your instruction but it didn't work :( In which order did you write html? – Alena Jul 28 '17 at 06:35
  • @cello I am using Bootstrap 4.0.0-alpha.6 and testing on Chrome on a MAC – Alena Jul 28 '17 at 06:36
  • @Alena I used the same order as you. So like the others said which bootstrap version did you use? – julianstark999 Jul 28 '17 at 06:38

6 Answers6

23

Since Bootstrap v4.x It is worth noting that the push-* and pull-* classes have been replaced by the order-* class.

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

more details and examples can be found here

This means that your example (and answer):

    <div class="row">
        <div class="col-md-7 push-md-5">
            A
        </div>
    
        <div class="col-md-5 pull-md-7">
            B
        </div>
    </div>

Becomes:

    <div class="row">
        <div class="col-md-7 order-md-5">
            A
        </div>
    
        <div class="col-md-5 order-md-7">
            B
        </div>
    </div>

And with the example given in the question, it would work.

However, as mentioned in the comments below, you don't need to use order-md-5 and order-md-7 as the order classes are not bound to the grid system other than to allow full control of the positioning of up to 12 columns.

This means that order-md-1 and order-md-2 are a more suitable solution for this.

There are also helpers such as this:

    <div class="container">
      <div class="row">
        <div class="col order-last">
          First, but last
        </div>
        <div class="col">
          Second, but unordered
        </div>
        <div class="col order-first">
          Third, but first
        </div>
      </div>
    </div>
DazBaldwin
  • 4,125
  • 3
  • 39
  • 43
  • 4
    I think it would be more clear if the answer would use order-md-1 order-md-2. The number after order-md-{number} is the order for the column and has nothing to do with the width of the grid system. – Joris Hart May 09 '19 at 23:19
  • @JorisHart, thanks, I've updated the answer to expand on that point. – DazBaldwin Nov 20 '19 at 09:38
2

The above answers are helpful but I'm answering my own question with little more detail so it may help anyone in the future. :)

Problem: Actually, my technique was right but wrong assumption. I was thinking, col-sm-* will apply on mobile devices. But this class is for > 576px screens devices.

Here is the grid classification: (V4 Alpha 6)

  • Extra small: <576px .col-
  • Small: ≥576px .col-sm-
  • Medium: ≥768px .col-md-
  • Large: ≥992px .col-lg-
  • Extra large: ≥1200px .col-xl-

Reference Bootstrap 4 Alpha for more detail

Technique:

  1. First write HTML for mobile screens (e.g A B)
  2. Use push and pull for large screen devices (e.g B A)

Here is the code, which works for my problem:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row">

 <div class="col-md-7 push-md-5">
  A
 </div>
 
 <div class="col-md-5 pull-md-7">
  B
 </div>

</div>

</div>
Alena
  • 1,134
  • 6
  • 19
  • 45
2

The accepted answer here misrepresents what the order classes do, which is to merely control the order of flexible items within a flex container (via the CSS order property). They are not a total replacement for all uses of the push-* and pull-* classes but work great for re-ordering columns.

To accomplish what you're looking for BS4 classes, you would need to do:

<div class="col-sm-7 col-md-7 order-md-2">
    A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
    B, shows second on mobile, first on desktop
</div>

As per the migration docs for BootStrap 4. See also the CSS order property.

rsigg
  • 76
  • 3
0

Here you go with a solution https://jsfiddle.net/kzmz7qaL/1/

.div1{ 
  background: blue;
  color: #fff;
}

.div2 {
  background: red;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">

    <div class="col-md-7 col-sm-7 push-sm-5 div1">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-sm-7 div2">
        B
    </div>

  </div>

</div>

I guess this is what you are looking for... Changed the pull & push for small screen (sm) rather than medium screen (md)

Pull works on left value (col value specified)

Push works from right (col value specified)

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
  • #1. Why pull and push isn't working for `md`? #2. Your code works in fiddle but not in my HTML. Very strange but any idea? – Alena Jul 28 '17 at 06:49
  • In your code, **pull** & **push** are actually working for **md**. But you need to specify the same for **sm** – Shiladitya Jul 28 '17 at 06:54
  • Here you go with an updated code https://jsfiddle.net/kzmz7qaL/2/ . Can you check the browser console, if any error is occurring.... – Shiladitya Jul 28 '17 at 06:56
  • thanks for your effort, there wasn't any console error. I was making a small mistake. – Alena Jul 28 '17 at 07:58
  • Please mention the mistake... So that if someone is referring to your question, shouldn't face the same issue... – Shiladitya Jul 28 '17 at 08:00
0

Bootstrap's "small" (sm) size covers the range from 768 to 992 pixels. "medium" (md) is from 992 to 1200 pixels. (Reference for Bootstrap 4 alpha).

By using class="col-md-7 col-sm-7 push-md-5" you define that the push happens when the screen is wider than 992 pixels. Screens with a width between 768 and 992 pixels just use the col-sm-7 setting, and only even smaller screens use the default which uses the full width.

So, for very small screens (< 576 pixels) you should see A on top of B. For small screens (using the sm settings) you'll see A B, as they are not pushed/pulled. And only for larger screens (> 992 pixels, using the md classes) you'll see B A.

To fix it, just get rid of the md-classes, and replace the pull/push-classes with the sm-variants, as others have proposed.

cello
  • 5,356
  • 3
  • 23
  • 28
0

The col-md-push-5 and col-md-pull-7 classes are not included with Bootstrap 4, but the Bootstrap Extension does. http://bootstrap-extension.com/#gridsystem

Solution:

<div class="row">

<div class="col-md-7 col-sm-7 col-md-push-5">
    A
</div>

<div class="col-md-5 col-sm-5 col-md-pull-7">
    B
</div>

William A.
  • 61
  • 1
  • 3