«Фаворити Успіху» logo Адаптивные колонки без бутстрап.css
© FAVOR.com.ua
 
Адаптивные колонки без бутстрап.css
  

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

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/) всё же работает...

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.

https://favor.com.ua/blogs/28412.html