У меня есть структура DOM на странице, которая выглядит примерно так:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-8">
Wide Stuff Here
</div>
<div class="col-lg-4 col-md-5 col-sm-4">
Narrow Stuff Here
</div>
</div>
</div>
Когда я оформляю эту структуру для печати, я в основном скрываю вещи, которые находятся внутри более узкого столбца справа. Тем не менее, я все еще хотел бы отобразить две вещи из этого на печатной странице. Проблема в том, что внутри более широкого контейнера слева намного больше контента. В результате, когда этот контент проходит мимо контента в правом столбце, он выглядит неуместным на странице из-за пустого пробела справа.
Мой вопрос, как можно решить эту проблему. Я думал о том, чтобы каким-то образом позволить содержимому из широкого левого столбца занять полную ширину, начиная с определенной точки или контейнера, но я не уверен, как этого добиться. Я также открыт для других идей о том, как можно представить это лучше.
Чтобы быть более конкретным, на этой странице отображается рецепт приготовления. В левой колонке есть большое изображение блюда, а также список картинок и этапов его приготовления. В правом столбце есть коробка с ингредиентами и коробка с рейтингом рецепта.
Любой совет приветствуется.