1

I have 3 columns

(1) .col-md-4 | (2) .col-md-4 | (3) .col-md-2 | (4) .col-md-2

I want this in small screen (Phone / small screen) as:

(1) | (4) |

(2) | (3) |

Foisal Mehedi
  • 39
  • 10
  • 1
    Can you show us your current code, ideally as a JSFiddle? – vektor Nov 29 '17 at 12:11
  • Try with offset. When the sum of the columns are higher than 12, it automatically goes in a new line –  Nov 29 '17 at 12:12

1 Answers1

4

First of all, as far as I can tell you have not 3 but FOUR columns.

Secondly, what you want to do is called reordering. You want to reorder the columns below the md breakpoint.

Here's how you do it: 

<div class="container">
   <div class="row">
       <div class="col-md-4 order-1 order-md-1">1</div>
       <div class="col-md-4 order-3 order-md-2">2</div>
       <div class="col-md-2 order-4 order-md-3">3</div>
       <div class="col-md-2 order-2 order-md-4">4</div>
   </div>
</div>

With order-md-* you specify the order for each column from the medium breakpoint onwards.

And with order-* you specify the order you want below the medium breakpoint (i.e. that's the default "mobile-first" breakpoint).

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70