html - filas - tabla con divs bootstrap

CSS responsivo de 3 columnas(ordenando posiciones de contenido)

Question

Me pregunto si hay alguna manera de ordenar la posición del contenido cuando el tamaño de la pantalla se reduce a 480 o menos. Lo que quiero decir es que en col.3 tendré el nombre, número y dirección, etc., en la columna 2 tendré cosas sociales y col 1 tendré una imagen. Me gustaría que primero aparecieran el nombre y la dirección, luego la imagen y luego los íconos sociales. El orden sería 3,1,2. Estoy tratando de mantenerlo receptivo.

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

Huh, esta es una solución extraña, pero con jQuery :) Simplemente experimentando.

Primero, agregué clases adicionales dentro del marcado HTML. Luego, he agregado para móvil estas propiedades para la clase .third

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

y este último código jQuery

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

Hay muchos cambios, así que eche un vistazo a este violín http://jsfiddle.net/AYcVF/2/

Tal vez alguien tenga una solución CSS única, pero esto es lo mejor que puedo hacer hasta ahora.

Answer 2

Sería más eficiente optimizar su orden de origen para dispositivos móviles y usar la solución de metadeptos para reordenar las columnas para escritorio.

Sin embargo, si el orden de origen no se puede modificar por la razón que sea o si no conoce el ancho de los elementos que desea reordenar, entonces necesita 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>

Tenga en cuenta que he modificado sus consultas de medios para que sean un poco más eficientes.

Answer 3

Tengo un poco de problemas para dar sentido al orden de tus columnas, pero la forma de reorganizarlas en los dispositivos móviles es "empujar" y "tirar" usando los márgenes. Por ejemplo:

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

Esto hará que la columna 2 aparezca antes de la columna 1 en un diseño uno al lado del otro (escritorio), y luego podrá eliminar los márgenes del diseño apilado (móvil).

Ver este jsFiddle: http://jsfiddle.net/4KUUt/

EDIT 2

Creo que lo tengo configurado en el orden que querías. Si todavía está buscando una solución, intente esto: http://jsfiddle.net/4KUUt/5/