doing my 1st responsive design and is something like this possible in bootstrap 3. Change this on lg:
[a] [ ]
[b] [ c ]
[ ]
to this on sm:
[a]
[c]
[b]
Asked
Active
Viewed 131 times
1
-
You can use hidden-sm class - check the reference here http://getbootstrap.com/css/#responsive-utilities – Luís P. A. Jan 15 '15 at 11:07
-
You want [ c ] to stack down on sm. So isn't the order in sm should be [a][b][c]? Since c is on same level as b, so if it stacks down on small screen , it will go below b. – RahulB Jan 15 '15 at 11:18
-
c is not at the same level as b, it is on the same level as div for A and B – novox Jan 15 '15 at 11:23
3 Answers
0
You can use two div. One is for first type of arrangements and other is for second type of arrangements. The first is only shown in lg and and last one is only in sm.
<div class="hidden-sm">
</div>
<div class="hidden-lg">
</div>
Swapnil Motewar
- 1,080
- 6
- 12
-
i was finking about this. Is hiding elements is the right way too do this? Can their be any other methods? – novox Jan 15 '15 at 11:18
-
for responsiveness you can add class as per your need like col-lg-8 like. – Swapnil Motewar Jan 15 '15 at 11:21
-
Hiding div not having problem. This is the solutions that i know. – Swapnil Motewar Jan 15 '15 at 11:21
-
bootstrap support ie 9 and 9+ only. So it will supoort only ie 9 and 9+ – Swapnil Motewar Jan 15 '15 at 11:27
0
In your HTML markup, place the [c] between [a] and [b]. Add class 'pull-left' to a and b. Add class 'pull- right' to c. Finally, contain them in a div that defines breakpoints e.g class='col-sm-12 col-md-12'.
Wycliff Bironga
- 1
- 1
-
I have another question for you, what if i want to get [b][c][a] on sm, is it possible to do this using html an bootstarp methods? – novox Jan 15 '15 at 11:48
-
Mark question as answered for others who may come along. About the second question, i'm not getting it quite well.....the col-sm-12 class handles that. Unless you want smaller div? Use a smaller number in place of 12. – Wycliff Bironga Jan 15 '15 at 12:05
0
You can use pull-right on column C... A-C-B on mobile.
<div class="row">
<div class="a col-lg-6">
A
</div>
<div class="c col-lg-6 pull-right">
B
</div>
<div class="b col-lg-6">
C
</div>
</div>
Carol Skelly
- 351,302
- 90
- 710
- 624