How to have different layout orders for same html code for desktop and desktop using css or javascript (not jquery)


Tags: css,mobile,layout

Problem :

I would like to make different desktop and mobile layout order for same html code by means of css or java. How can I do that. See the images for the desktop layout and the responsive mobile layout for the same html code. I do not want to make another page for mobile version and do not want to use jquery, would like to make this via css or javascript short codes.

As you can see in the images below, the order of the blocks is not the same in the desktop and mobile versions

[![Desktop layout for html code][1]][1] [![Mobile layout (desired) for same html code][2]][2]

[1]: http://i.stack.imgur.com/3tJ74.jpg [2]: http://i.stack.imgur.com/8VP7f.jpg



Solution :

I found that the best way to make a mobile layout and corresponding desktop responsive layout is to FIRST make html according to position of mobile layout. Then, since I want the sidebar to float on right, I put that in the css.

See these codepens -

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

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

Mobile and Desktop Html -

<div class="container"> 
<div><div class="header"> 1. Header</div> </div>
<div class="menu"> 2. Menu</div> 
<div class="submenu">3. Sub Menu </div> 
<div class="sidebar">4. Sidebar </div> 
<div class="search">5.Search</div>
<div class="text-area">6. Text Area </div>


 <div class="footer">7.Footer </div>
 </div>

Mobile Css -

.container {
width: 100%;
min-height: 1000px;
height: auto;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: absolute;
display: block;
}

.header {
width: 100%;
height: 50px;
background: brown;
}

.menu {
 width: 100%;
height: 20px;
background: white;
clear: both;
}

.submenu {
width: 100%;
background: green;
height: 50px;
float: left;
}
.search {
width: 100%;
background:pink;
}
.text-area {
width: 100%;
height: 200px;

background: #FFF380;
}

.sidebar {
width: 100%;
height: 50px;
float: right;
background: blue;
}

div.footer {
color:white;
width: 100%;
clear: both;
height: 50px;
background: black;

}

Desktop css :

.container {
 width: 100%;
 min-height: 1000px;
 height: auto;
 margin: 0;
 padding: 0;
 top: 0;
 left: 0;
 position: absolute;
 display: block;
 }

.header {
 width: 100%;
 height: 50px;
 background: brown;
 }

.menu {
 width: 100%;
 height: 20px;
 background: white;
 clear: both;
 }

.submenu {
 width: 70%;
 background: green;
 height: 50px;
 float: left;
 }
 .sidebar {
 width: 30%;
 height: 530px;
 float: right;
 background: blue;
 }
.search {
 width: 70%;
 background:pink;
 height:100px;
 float:left;
 }
.text-area {
width: 70%;
height: 379px;
float:left;
background: #FFF380;
}

div.footer {
color:white;
width: 100%;
clear: both;
height: 50px;
background: black;

}

    CSS Howto..

    How to hide a column in a DataGrid?

    How to create donut chart in pure css & svg

    How to have an array of images side by side using css/html

    How do browsers read and interpret CSS?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    CSS: How to clear a floating object only one level, not the all the way to the left?

    how to number questions using class in CSS

    How to make a paragraph appear in a certain area in the page using Wordpress?

    Ionic Side Menu Not Showing Content

    How to load a dynamic view css file using requireJs & Backbone

    How to add CSS if element has more than one child?

    How to make <'details'> drop down on mouse hover

    How to copy the CSS to another tab in Chrome?

    How make frameset resize appropriately with jstree context menu

    How to get a smooth sine wave alternation with Javascript/JQuery CSS

    How to give same style to first 2 paragraphs differently in css

    how to give two different states in css?

    how to use CSS opacity to let background bleed through in IE8?

    jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

    Linking CSS button to email - How can it be done?

    How to Create CSS Selector Element including index

    How to make an oblique oval in CSS?

    PrimeFaces: how to override CSS class

    How to apply different css margin-top to each children in a list

    How to set CSS rules for input, except one type

    how to make minified and readable css file in sublime text?

    How can i expand the content through css?

    How to increase constant space between li inline-block list elemets?

    How proper add 2 CSS file in a WordPress theme?