logo Randthemes.com

How to arrange content in mobile view using CSS

If you create responsive template you probably face the problem of the arrange of content on mobile device.

Here is example of what i’m talking about.
If you use Twitter Bootstrap grid and use left sidebar and right you have page content in mobile view first you get sidebar content and then you can read page content.
If you want to display content first then sidebar you need to arrange component position.
The most simple way is to use CSS3.

Hera is code example:

.container .row{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

.container .row .second{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;

.container .row .first{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;

We using order: to arrange the content by adding arrange numbering.

Leave a Reply