Как сохранить свое место, когда два столбца становятся тремя столбцами
У меня есть новый проект, использующий загрузочный макет с двумя столбцами, навигацию и контент. Пользователи захотят детализировать блоки в контенте. Иногда это будут карточки с двумя столбцами, а иногда - столы. Нажатие в любом месте на элементе должно развернуться.
Когда я нажимаю на карту, я хочу, чтобы с правой стороны экрана выдвигался ящик с подробной информацией. Но не хватает места. Поэтому я хочу уменьшить навигацию и второй столбец. Второй столбец будет иметь ширину только одну карточку, оставляя место для подробностей, которые появятся в новом третьем столбце.
Вот рабочий пример без анимации. Это дребезжит, но все понятно. Нажмите на рецепт, и вы увидите, что он меняет состояние. Нажмите еще раз, чтобы удалить панель "развернуть".
https://jsfiddle.net/cg5n2eL6/
Вопрос: Как мне сохранить текущий рецепт там, где он есть? Это огромная проблема с пользовательским интерфейсом. Если вы используете карту 1, это нормально. Но любой рецепт в столбце 2 или даже позже в первом столбце, и он прыгает куда-то еще.
Если это имеет значение, я уверен, что в конечном итоге сбросит .col-sm-6 классы... похоже, чтобы анимировать переход между состояниями, мне нужно использовать.main-content.main-content-full-width или что-то в этом роде и просто переключать main-content-full-width, вместо переключения.col-sm-6 и.col-sm-4. Так что, если это влияет на ваш ответ, вы были предупреждены.:)