3 Column Responsive CSS (Ordering Contents Positio

Question

Im wondering is there any way to order the contents position when the screen size is reduced to 480 or lower. What i mean is in col 3 i will have the name, number & address etc, in column 2 i will have social stuff and col 1 i will have an image. I would like to have the name and address stack up first, then the image, then the social icons. The order would be 3,1,2. Im trying to keep it responsive.

CSS:

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
} 

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GRID OF THREE           ============================================================================= */


.span_3_of_3 {
width: 100%; 
}

.span_2_of_3 {
width: 66.1%; 
}

.span_1_of_3 {
width: 32.2%; 
}


 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

 @media only screen and (max-width: 480px) {
.span_3_of_3 {
    width: 100%; 
}
.span_2_of_3 {
    width: 100%; 
}
.span_1_of_3 {
    width: 100%;
}
}

HTML:

<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>

Answer 1

I'm having a little bit of trouble making sense of your column ordering, but the way to make them rearrange on mobile is to 'push' and 'pull' using margins. For example:

.span_1_of_3 {
    margin-left: 33%;
}

.span_2_of_3 {
    margin-left: -65%;
}

This will make column 2 appear before column 1 in a side-by-side (desktop) layout, and you can then remove the margins for the stacked (mobile) layout.

See this jsFiddle: http://jsfiddle.net/4KUUt/

EDIT 2

I think I've got it set up in the order you wanted. If you're still looking for a solution, try this: http://jsfiddle.net/4KUUt/5/

Answer 2

It would be more efficient to optimize your source order for mobile and use metadept's solution for reordering the columns for desktop.

However, if the source order cannot be modified for whatever reason or you do not know the widths of the elements you wish to reorder, then you need Flexbox:

http://jsfiddle.net/4KUUt/3/

/*  SECTIONS  */
/* line 5, ../sass/test.scss */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/* line 11, ../sass/test.scss */
.a {
  background-color: #CCF;
}

/* line 14, ../sass/test.scss */
.b {
  background-color: #CFC;
}

/* line 17, ../sass/test.scss */
.c {
  background-color: #FCC;
}

/*  GRID OF THREE           ============================================================================= */
@media only screen and (min-width: 480px) {
  /* line 24, ../sass/test.scss */
  .span_3_of_3 {
    width: 100%;
  }

  /* line 28, ../sass/test.scss */
  .span_2_of_3 {
    width: 66.1%;
  }

  /* line 32, ../sass/test.scss */
  .span_1_of_3 {
    width: 32.2%;
  }

  /*  COLUMN SETUP  */
  /* line 37, ../sass/test.scss */
  .col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
  }

  /* line 42, ../sass/test.scss */
  .col:first-child {
    margin-left: 0;
  }
}
@media only screen and (max-width: 480px) {
  /* line 48, ../sass/test.scss */
  .section {
    width: 100%; /* fix for Firefox */
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* line 53, ../sass/test.scss */
  .a {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-flex-order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }

  /* line 57, ../sass/test.scss */
  .b {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-flex-order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}


<div class="section group">
    <div class="col span_1_of_3 a">This is column 1</div>
    <div class="col span_1_of_3 b">This is column 2</div>
    <div class="col span_1_of_3 c">This is column 3</div>
</div>

Note that I've modified your media queries to be a little more efficient.

Answer 3

Huh, this is some weird solution, but with jQuery :) Just experimenting.

First, I've added extra classes inside HTML markup. Then, I've added for mobile this properties for class .third

.third {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
}

and latter this jQuery code

$(window).resize(function(){
    if ($(".third").css("position") == "absolute") 
    {
        $(".first").css("margin-top", $(".third").height());
    }
    else
    {
        $(".first").css("margin-top", "1%");
    }
});

There is a lot changes, so just take a look at this fiddle http://jsfiddle.net/AYcVF/2/

Maybe someone have CSS only solution, but this is best I can do so far.