I've this layout:

<div class="row1">
    <div class="col-sm-4 col-md-4" id="col1"></div>
    <div class="col-sm-4 col-md-4" id="col2"></div>
    <div class="col-sm-4 col-md-4" id="col3"></div>
<div class="row2">
    <div class="col-md-12 col-xs-12" id="col4"></div>

This is perfect on large-small screen. But not adapt for what i want to displayed on mobile. Displayed:

col1 col2 col3


How can i get this: col3 and col4 reodered on mobile. Like this:

col1 col2 col4


So col4 change from row2 -> row1, col3. And cal3 get from row1 -> row2, col4. Just on mobile. Note: This is to be applied just on mobile/small screen. For the display is fine for midle and large screen.

  • what about using an offset for the small screen? getbootstrap.com/css/#grid-offsetting – Emil Orol Nov 20 '15 at 17:21
  • Hey, thank's for your comment. I just added the code. to my post. The Offset just "Move columns to the right". But i want to move it from top to down and just on mobile screen! – danyhiol Nov 20 '15 at 17:38
  • My bad I mean push / pull getbootstrap.com/css/#grid-column-ordering – Emil Orol Nov 20 '15 at 17:55
  • Hey i've already tried that. It's not working at all. Don't know why! – danyhiol Nov 20 '15 at 18:15
  • Then maybe you should research if you've got the push/pull syntax correct. You make it sound like it had no affect on the page -- do more learning and research. Also, it's rather rude to end every single sentence you write with ! even your profile page says "Master of Infomatics!" I hope you don't walk around all day yelling at everyone ... – tenken Nov 20 '15 at 18:42

If you're able to use a flex container for your divs all in the same div, you might try using the order property in a media query for smaller screens. It lets you select the order of elements. I've done a fiddle here.

Here's the CSS I used.

.row1 {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
@media (max-width: 767px) {
  #col1 {order: 1;}
  #col2 {order: 2;}
  #col3 {order: 4;}
  #col4 {order: 3;}
| improve this answer | |

You won't be able to do this using Bootstrap grid classes alone. The easiest way to do it without touching JavaScript would be to bring all the columns into the same parent container and add a copy of the third column that you toggle between:

<div class="row1">
    <div class="col-xs-4 col-sm-4" id="col1">#1</div>
    <div class="col-xs-4 col-sm-4" id="col2">#2</div>
    <div class="hidden-xs col-sm-4" id="col3a">#3</div>
    <div class="col-xs-4 col-sm-12" id="col4">#4</div>
    <div class="hidden visible-xs-block col-xs-12" id="col3b">#3</div>

You could probably do it with the fourth column instead, if the content makes it easier.

| improve this answer | |
  • You are right. Look like swapping column in rows is not possible with bootstrap. So i've decided just to move col3 under col4 on mobile display! I've tried with col-md-push-12 but not positive result! – danyhiol Nov 21 '15 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.