CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user2281858
user2281858

Reputation: 1997

Interchange element position for smaller devices - bootstrap

I want to interchange the position of two elements, for only sm devices.

It is currently like this:

 ----------------- -----------------
|        Text        |        Button        |
 ----------------- -----------------

I want it to be like this:

 ----------------- 
|        Button        |
 -----------------
|        Text        |
 -----------------

In the FIDDLE, the Know the status text should be below Save button for sm devices.

FIDDLE HERE

Upvotes: 3

Views: 93

Answers (1)

jeffdill2
jeffdill2

Reputation: 4114

You need the column ordering functionality of Bootstrap:

http://getbootstrap.com/css/#grid-column-ordering

Here's a pen to show you an example of how this would work:

http://codepen.io/anon/pen/QyNGWL

Notice how the order of the elements is TEST 1 and then TEST 2 when side by side. As the breakpoints of the viewport get smaller they switch places and then, as you requested, the TEST 2 element is stacked above the TEST 1 element when at smallest breakpoint.

Upvotes: 2

Related Questions