3-х колоночный отзывчивый CSS (Порядок содержания позиций)

Question

Мне интересно, есть ли способ упорядочить содержимое содержимого, когда размер экрана уменьшен до 480 или ниже. Я имею в виду, что в столбце 3 у меня будет имя, номер, адрес и т. Д., В столбце 2 у меня будет материал для общения, а в столбце 1 - изображение. Я хотел бы, чтобы имя и адрес располагались сначала, затем изображение, а затем социальные иконки. Заказ будет 3,1,2. Я пытаюсь держать это отзывчивым.

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

Было бы более эффективно оптимизировать исходный заказ для мобильных устройств и использовать решение метадепта для изменения порядка столбцов для настольных компьютеров.

Однако, если исходный порядок не может быть изменен по какой-либо причине или вы не знаете ширину элементов, которые вы хотите изменить, вам понадобится 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>

Обратите внимание, что я изменил ваши медиа-запросы, чтобы сделать их немного более эффективными.

Answer 2

У меня возникли небольшие проблемы с пониманием порядка столбцов, но способ перегруппировать их на мобильном устройстве - это "выталкивать" и "вытягивать", используя поля. Например:

.span_1_of_3 {
    margin-left: 33%;
}

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

Это заставит столбец 2 появиться перед столбцом 1 в расположении рядом (на рабочем столе), а затем можно удалить поля для сложенного (мобильного) расположения.

Смотрите это jsFiddle: http://jsfiddle.net/4KUUt/

РЕДАКТИРОВАТЬ 2

Я думаю, что я настроил его в том порядке, который вы хотели. Если вы все еще ищете решение, попробуйте это: http://jsfiddle.net/4KUUt/5/

Answer 3

Да, это странное решение, но с jQuery:) Просто экспериментирую.

Во-первых, я добавил дополнительные классы в разметку HTML. Затем я добавил для мобильного это свойство для класса .third

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

и последний это код JQuery

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

Есть много изменений, так что просто посмотрите на эту скрипку http://jsfiddle.net/AYcVF/2/

Возможно, у кого-то есть решение только для CSS, но это лучшее, что я могу сделать до сих пор.