[dx] Posted February 5, 2015 Share Posted February 5, 2015 Hello guys. In attachment you can find files / images how I need to make my design "desktop vs mobile". It can be done with pure CSS or any CSS framework. Last option I want is jQuery. Best regards. Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2015 Share Posted February 6, 2015 Have you read the documentation at http://getbootstrap.com/ ? Link to comment Share on other sites More sharing options...
[dx] Posted February 6, 2015 Author Share Posted February 6, 2015 If you mean about pushing and pulling, yes I did. But can't find solution. Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2015 Share Posted February 6, 2015 The grid system makes it really easy to make the layout you're proposing. Link to comment Share on other sites More sharing options...
[dx] Posted February 6, 2015 Author Share Posted February 6, 2015 I'm trying but not successfully. With cols pushing/pulling it works if cols are in same row (like in example: col-3 and col-9), but for me is different. Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2015 Share Posted February 6, 2015 You have to adapt your HTML to make the layout work. <div class="row"> <div class="col-md-8">A</div> <div class="col-md-4">B</div></div><div class="row"> <div class="col-md-12">C</div></div> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 6, 2015 Share Posted February 6, 2015 (edited) md for desktop, sm for mobile <div class="row"><div class="col-md-8 col-sm-12">A</div><div class="col-md-4 col-sm-12">B</div><div class="col-md-12">C</div></div>For desktop col-md-* class would be used, for mobile col-sm-*, this class will overide col-md-* when screen width is of mobile, there is no need to apply col-sm-12 class to last container, as col-sm-12 and col-md-12 are the same (100%). Edited February 6, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
[dx] Posted February 6, 2015 Author Share Posted February 6, 2015 (edited) Ingolme: http://www.bootply.com/SubWSDQsjr dsonesuk: http://www.bootply.com/qqc6UgSMrP Desktop is fine, but I need A C B order in mobile. Check images in attachment above. Edited February 6, 2015 by Haris S Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2015 Share Posted February 6, 2015 You want them in the order A C B? That's impossible with CSS. You would need Javascript to change the DOM to move B further ahead in the document from C. Link to comment Share on other sites More sharing options...
[dx] Posted February 6, 2015 Author Share Posted February 6, 2015 OK then, thanks Link to comment Share on other sites More sharing options...
tejasamrute Posted February 7, 2015 Share Posted February 7, 2015 (edited) @haris.....u can make a duplicate of C ( after B ) and place it after A.....and hide it for desktop version.....when the view port reaches mobile version.....make C ( after A ) visible .....and hide C ( after B ) <div class="row"><div class="col-md-8 col-sm-12">A</div><div class="col-md-8 col-sm-8 hidden-md hidden-lg visible-sm visible-xs">C</div><div class="col-md-4 col-sm-12">B</div><div class="col-md-12 hidden-xs hidden-sm visible-lg visible-md">C</div></div> Edited February 7, 2015 by Tezzo Link to comment Share on other sites More sharing options...
Ingolme Posted February 7, 2015 Share Posted February 7, 2015 While the solution works (I was thinking of it earlier) duplicate content is bad for search engine optimization and especially confusing for people browsing with a screen reader. Link to comment Share on other sites More sharing options...
tejasamrute Posted February 7, 2015 Share Posted February 7, 2015 well...yeah...duplicate content is ofcouse bad......but if the content is not much or if there is an image......the solution can be worth Link to comment Share on other sites More sharing options...
tejasamrute Posted February 7, 2015 Share Posted February 7, 2015 this is the most perfect solution <div class="row"> <div class="col-xs-12 col-md-4"> <div class="alert alert-info">A</div> </div> <div class="col-xs-12 col-md-4 col-md-push-4"> <div class="alert alert-danger">C</div> </div> <div class="col-xs-12 col-md-4 col-md-pull-4"> <div class="alert alert-warning">B</div> </div></div> Link to comment Share on other sites More sharing options...
Ingolme Posted February 7, 2015 Share Posted February 7, 2015 That solution has A B and C on the same row. C should be below A and B. col-xs-12 is redundant, since that's the default unless specified otherwise. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2015 Share Posted February 7, 2015 (edited) Don't know how compatible column-reverse is with other browsers (oh look! http://www.w3schools.com/cssref/css3_pr_flex-direction.asp) not including IE as nothing is ever compatible with that lump of #%@&, it needs more work but its very close. <div class="row"><div class="col-md-8 col-sm-12 redthis">A</div> <div class="row flexthis"><div class="col-md-4 col-sm-12 bluethis">B</div><div class="col-md-12 col-sm-12 greenthis">C</div> </div></div> /* CSS used here will be applied after bootstrap.css */.redthis {background-color: red;}.bluethis {background-color: blue;}.greenthis {background-color: green;}.row.flexthis {margin-left:0; margin-right: 0;}@media screen and (max-width: 768px){ .row.flexthis { display: -moz-flex; display:flex; flex-direction: column-reverse; flex-wrap: wrap; } } Edited February 7, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2015 Share Posted February 8, 2015 (edited) try this p{margin: 1em 0;} .border-radius-all { border-bottom-left-radius:15px; border-bottom-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; padding: 0 15px; } .margin-top-bottom {margin: 10px 0;} .flexybox-wrap {margin: 10px 0; overflow:hidden;} .margin-minus-left-right {; margin-right: -10px;} .margin-minus-left{;} .a{ background-color: red; m@rgin-left:-15px; /* */ } .b{ background-color: blue; display: block; color: #fff; m@rgin-left: -20px; margin-right:-5px; } .c{ background-color: green; } .a, .b, .c {min-height: 100px; line-height: 100px; text-align: center; background-color: lime; border: 1px solid green; color: #fff;} @media screen and (min-width: 992px){ } @media screen and (max-width: 993px){ .row.swap-row-flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -o-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -o-flex-wrap: wrap; /* Safari 6.1+ */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ -moz-flex-wrap: wrap; flex-wrap: wrap; clear: both; } .a { m@rgin-left: -15px; margin-right: -15px; } .b{ display: block; float:none; margin:0; } } <div class="container"> <div class="row"> <div class="flexybox-wrap"> <div class="col-md-12 margin-top-bottom"> <div class="col-md-8 col-sm-12"><div class="border-radius-all a">A</div></div> <div class="row swap-row-flex"> <div class="col-md-4 col-sm-12"><div class="border-radius-all b">B</div></div> <div class="col-md-12 col-sm-12"><div class="border-radius-all margin-top-bottom c">C</div></div> </div> </div> </div> </div> </div> EDIT: For some stupid reason using code tag its ANTI 'margin-left: nn;' probably a nasty swear word in some culture, like using thumb to thumb for a lift in Taiwan is a insult (DONT do it) and leaves just ';', which is a pain, so i had to use 'm@rgin-left: nn;' instead. Edited February 8, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now