How to Change position of Bootstrap columns?

Question

I have code like this using Bootstrap 3 for desktop devices:

<div class="row">
<div class="col-md-5">
<img src="logo.png">
</div>
<div class="col-md-4">
Element 1
</div>
<div class="col-md-3">
Element 2
</div>
</div>

I want to change positions of the colums for mobile version only to change Element 1 and Element 2 HTML code how can I do with jQuery or ?

I want this change for mobile devices, I don't know how to change positions of the elements? I need this in results

  <div class="row">
    <div class="col-md-5">
    <img src="logo.png">
    </div>
    **<div class="col-md-3">
    Element 2
    </div>**
    <div class="col-md-4">
    Element 1
    </div>
    </div>

score 1 · Answer 1 · edited May 23 '17 at 12:26

1

You may find helpful the text from the Bootstrap documentation:

column ordering.

Also, there is more detailed usage examples and explanation in this thread on Stackoverflow.

edited May 23 '17 at 12:26

Community

1
1

answered Aug 29 '14 at 08:48

ivan.mylyanyk

2,051
4
30
37

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

You can achieve the same result using jQuery. The same problem was already answered here: Swtich 2 divs

edited May 23 '17 at 10:33

Community

1
1

answered Aug 29 '14 at 08:52

WhiteAngel

2,594
2
21
35

score 0 · Answer 3 · answered Aug 29 '14 at 09:05

try this:

   <div class="row">
        <div class="col-xs-5">
            Element 0
        </div>
        <div class="col-xs-4 col-xs-push-3 col-sm-push-0">
            Element 1
        </div>
        <div class="col-xs-3 col-xs-pull-3 col-sm-pull-0">
            Element 2
        </div>
    </div>

this changes the position of the columns for eg mobile devices. As you can see im working with push and pull. To get the right positions of the elements you had to reset the pull/push for the specific widths.

How to Change position of Bootstrap columns?

3 Answers3