CSS desktop / mobile modification

[[dx]]

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.

[Ingolme]

Have you read the documentation at http://getbootstrap.com/ ?

[[dx]]

If you mean about pushing and pulling, yes I did.

 

But can't find solution.

[Ingolme]

The grid system makes it really easy to make the layout you're proposing.

[[dx]]

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.

[Ingolme]

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>

[dsonesuk]

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

[[dx]]

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

[Ingolme]

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.

[[dx]]

OK then, thanks

[tejasamrute]

@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

[Ingolme]

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.

[tejasamrute]

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

[tejasamrute]

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>

[Ingolme]

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.

[dsonesuk]

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

[dsonesuk]

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