0

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>
<div class="row2">
    <div class="col-md-12 col-xs-12" id="col4"></div>
</div>

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

col1 col2 col3

 col4      

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

col1 col2 col4

 col3       

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.

7
  • what about using an offset for the small screen? getbootstrap.com/css/#grid-offsetting
    – Emil Orol
    Commented Nov 20, 2015 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
    Commented Nov 20, 2015 at 17:38
  • My bad I mean push / pull getbootstrap.com/css/#grid-column-ordering
    – Emil Orol
    Commented Nov 20, 2015 at 17:55
  • Hey i've already tried that. It's not working at all. Don't know why!
    – danyhiol
    Commented Nov 20, 2015 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
    Commented Nov 20, 2015 at 18:42

2 Answers 2

1

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;}
}
0

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>
</div>

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

1
  • 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
    Commented Nov 21, 2015 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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