Вот, сделал css'ку для таблицы с двумя адаптивными колонками, которые меняют порядок при измении ширины области просмотра, с минимальной шириной одной из колонок. Пример на https://jsfiddle.net/utilmind/1zt248ek/, но демка есть и тут. Схлопывается когда ширина таблицы меньше 500px.
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.colblock {
    display: block;

    padding: 10px;
}
.contentn1 {
    border: 2px dotted red;
}
.profilen1 {
    border: 2px dotted blue;
}
@media (min-width: 500px) {
  .colblock {
    position: relative;
  }  
  .contentn1 {
		float: left;
		width: 74%;
		left: 26%;
	}
	.profilen1 {
		float: left;
		width: 26%;
		right: 74%;
	}
}

Columns collapsed when width less than 500px.

			Some long main content. ~76% width, when expanded.
			Side panel with user profile. Width: 26% and minimal width — 230px.

UPD. А теперь версия, которая действительно устанавливает минимальную ширину ячейки. Увы, единственный способ сделать это — применить технику Flexbox от HTML5. Я честно пытался этого избежать, т.к. сомневался что flex корректно работает в IE, но похоже что этот пример (https://jsfiddle.net/utilmind/1zt248ek/8/) всё же работает...

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.content {
    padding: 10px;
    border: 2px dotted red;
}
.profile {
    padding: 10px;
    border: 2px dotted blue;
}
@media (min-width: 500px) {
  .flexarea {
      display: flex;
  }
  .content {
	  order: 2;
		width: 74%;
	}
	.profile {
    order: 1;
	  width: 26%;
		min-width: 230px;
	}
}

Columns collapsed when width less than 500px.

Some long main content. ~76% width, when expanded.

This is Side panel with user profile. We want ~26% width, with minimal width of 230px.

Some notes... Unfortunately “min-width” doesn't works with floating elements. It works good in table cells, but once you make them "floating" — they stopping working within the table and break it.

And it looks like calc() doesn't works too for relative positioned elements:( So it looks like the only way is to use "flex". (I'm reallly tried to avoid it initially.)

See also previous version of this "fiddle", starting from 1st, to see the progress.

————————————

Цей документ було скопійовано з FAVOR.com.ua (https://favor.com.ua/blogs/28412.html).
Всі права на матеріал зберігаються за його автором. При перепублікуванні посилання на джерело матеріалу є обов’язковим!
Дата документу: 31 березня 2017 р.